Vue2中的slot组件、slot属性、以及父子组件如何玩(整了半天终于明白了)
slot是插槽的意思,听起来似乎很明白,操作起来总是有问题,关键还是细节!A、首先你要确保你的代码在你创建的new Vue元素对象作用域内(无意犯的错误!)B、 第一步:首先定义一个自己的组件如:my-slotconst app =new Vue({el:".container",components:{"m...
·
slot是插槽的意思,听起来似乎很明白,操作起来总是有问题,关键还是细节!
A、首先你要确保你的代码在你创建的new Vue元素对象作用域内(无意犯的错误!)
B、
第一步:首先定义一个自己的组件如:my-slot
const app = new Vue({
el:".container",
components:{
"my-slot":{
template:"#myslot",
data:function(){
return {
component:"这是一个局部组件模板",
}
},
}
}
});
第二步:html中第一个一个模板#myslot(在组件模板中,把想要插入的元素,通过插槽slot标签写入进来!可以指定插入内容的name属性);
<template id="myslot">
<ol>
<li>这是一个myslot组件,利用slot切入内容</li>
<slot name= "kirin2019"></slot>
</ol>
</template>
第三步:组件作用域在#container中,在自定义组件 <my-slot>指定slot属性的数据会导入</my-slot>
<my-slot>
<p><span>这里没有添加slot属性,所以这里的内容不会插入进去</span></p>
<ul slot = "kirin2019">
<li>由于ul标签指定了slot属性,所以旗下的所有标签内容都会自动插入指定名字为kirin2019的插槽中</li>
<li>这些都会被插入</li>
</ul>
<p><span>这里也不会插入</span></p>
</my-slot>
更多推荐
已为社区贡献42条内容
所有评论(0)