1.slot组件分发
- 默认情况
<div id="root">
<children>
<div>父组件</div>//不会显示
</children>
</div>
<script>
var vm = new Vue({
el:"#root",
components:{
children:{
template:'<span>子组件</span>'
}
}
})
</script>
-----------------------------------------
//页面显示：子组件
2.单个slot
<body>
<div id="root">
<children>
<div>父组件</div>
</children>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#root",
components:{
children:{
template:'<span><slot></slot>子组件</span>'
}
}
})
</script>
---------------------------------------------
//页面显示：父组件 子组件
3.具名slot
<body>
<div id="root">
<children>
<div slot="goFirst">父组件1</div>
<div slot="goSecond">父组件2</div>
</children>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#root",
components:{
children:{
template:'<span><slot name="goFirst"></slot>子组件
<slot name="goSecond"></slot></span>'
}
}
})
</script>
</script>
---------------------------------------------------------
//页面显示：父组件1 子组件 父组件2
4.作用域
<body>
<div id="root">
<children>
<div slot="goFirst" @click='toclick'>父组件
11</div>
<div slot="goSecond">父组件2</div>
</children>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#root",
methods:{
toclick(){
console.log(1);
}
},
components:{
children:{
template:'<span><slot name="goFirst"></slot>子组件<slot name="goSecond"></slot></span>'
}
}
})
</script>
//父组件作用域内点击时才有用
！父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
5.没有内容分发时
<body>
<div id="root">
<children>
<div slot="goFirst" @click='toclick'>父组件1</div>
<!-- <div slot="goSecond">父组件2</div> -->
</children>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#root",
methods:{
toclick(){
console.log(1);
}
},
components:{
children:{
template:'<span><slot name="goFirst">显示内容1</slot>子组件<slot name="goSecond">显示内容2</slot></span>'
}
}
})
</script>
--------------------
//页面显示：父组件1 子组件 显示内容2
