Vue组件插槽

文章目录

• 插槽内容
• 后备内容
• 具名插槽
• 作用域插槽

---

一、插槽内容

<slot>标签可以看成是提供给父组件使用的占位符

<script type="text/x-template" id="my-radio">
    <label>
         <input type="radio":name="name":value="value" >
         <slot></slot>
    </label>
</script>

Vue.component('my-radio',{
    template:'#my-radio',
    props:['name,','value']
})

 

二、后备内容

在组件prop中，可以通过default选项设置该属性的默认值，在插槽中同样可以设置默认内容，它只会在插槽没有提供内容时被渲染。

<button type="submit">
    <slot></slot>
</button>

<button type="submit">
    <slot>Submit</slot>
</button>

三、具名插槽

<slot>标签有一个特殊的属性name，当模版中需要使用多个插槽时，可以通过该属性进行分区。如果没有name属性，则等价于name="default"。

<script type="text/x-template" id="book">
    <div class="card">
        <div class="card-header">
            <div class="card-title">
                 <slot name="title"></slot>
            </div>
            <div class="card-btns">
                 <slot name="btns"></slot>
            </div>
        </div>
        <div class="card-body">
            <slot name="body"></slot>
        </div>
    </div>
</script>

四、作用域插槽

子组件中如果存在数据，那么该数据只能在子组件模版中进行使用，即在父组件中使用该子组件是访问不到子组件中的数据的

<span>
    <slot>{{user.no}}</slot>
</span>