vue的插槽slot

时间:2022-12-03 22:42:09

插槽是写在子组件上,用啦留给父级添加内容的位置接口;

vue的插槽slot

1. 父级里的 <template :is='子标签名'>父插入内容</template>标签,里的内容       slot 标签位置 规定了父插入内容的位置。

2.slot标签 有name属性,通过设置不同的name值,实现父级不同的元素插在对应的位置

vue的插槽slot        vue的插槽slot

3作用域插槽

插槽的作用没有变化,就是会被父组件写在子组件里的内容替换掉,但是可以可以传值。从而形成不同的子组件形式渲染到父组件上。

1.将scope标签里绑定需要穿的值(item和index)。

2.在父级的子组件里,必须用template标签来定义出slot-scope(这个值能够接收第一步绑定的值),然后可以用想要的形式渲染数据来

vue的插槽slotvue的插槽slot