你的位置:首页 > 软件开发 > Java > Vue slot简单理解

Vue slot简单理解

发布时间:2017-09-12 11:00:12
情形一:子组件定义了具名的slot,父组件使用具名的slot,slot显示顺序为子组件定义slot的顺序子组件: Vue.component('child',{ template:`<div ><slot name="one&qu ...

Vue slot简单理解

情形一:

子组件定义了具名的slot,父组件使用具名的slot,slot显示顺序为子组件定义slot的顺序

子组件:

 

Vue.component('child',{  template:`<div ><slot name="one"></slot><slot name="two"></slot></div>` });

 

父组件使用子组件:

<child>  <h1 slot="two" class="two">woshi two</h1>  <h2 slot="one" class="one">woshi one</h2></child>

Vue slot简单理解

显示顺序按照子组件slot定义的顺序。

情形二:

子组件定义了不具名的slot,父组件直接使用子组件,并可以直接在子组件中写内容

子组件:

 

Vue.component('btn',{  template:`<div > <slot></slot></div>` });

 

父组件:

<btn>  按钮</btn>

Vue slot简单理解

情形三:

子组件slot中定义了默认内容,如果父组件引入了子组件,且不写内容,则显示子组件默认内容,子组件定义的默认内容也可以提前加任何样式或赋予任何标签。但是slot标签上不可以加任何样式。如果父组件引入定义了slot的子组件,并且赋予了内容,则子组件默认的slot中的标签与样式不会加上去。

子组件:

 

Vue.component('aaa',{  template:`<div> <slot><h1 >woshi slot默认内容</h1></slot></div>`});

 

父组件:

<aaa></aaa><aaa><h6>哈哈哈哈哈</h6></aaa><aaa>哈哈哈哈哈</aaa>

Vue slot简单理解

 

 vue dom元素挂载:

new Vue({  el:"#app" })

 

原标题:Vue slot简单理解

关键词:VUE

VUE
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。