组件的作用域:父组件的内容在父组件编译,子组件的内容在子组件编译;
<slot>
, 插槽里面写入<p>
标签;如下代码中注释掉 <span>
就会显示插槽里面内容,否则显示 <span>
标签内容;
<div id="app">
<zszxz-component>
<!-- <span>vue2.x</span> -->
</zszxz-component>
</div>
<script type="text/javascript">
Vue.component('zszxz-component',{
template: '<div> \
<slot> \
<p> 默认显示:知识追寻者<p/> \
</slot> \
</div>',
});
var app = new Vue({
el: '#app',
})
</script>
具名插槽就是带有名称的插槽,其能与单个插槽共存;
<span>
标签内容替换默认插槽(main); <div id="app">
<zszxz-component>
<span>vue2.x</span>
<div slot="header">菜单栏头部</div>
<div slot="footer">菜单栏底部</div>
</zszxz-component>
</div>
<script type="text/javascript">
Vue.component('zszxz-component',{
template: '<div class="container"> \
<div class="header"> \
<slot name="header"> </slot> \
</div> \
<div class="main"> \
<slot> </slot> \
</div> \
<div class="footer"> \
<slot name="footer"> </slot> \
</div> \
</div>',
});
var app = new Vue({
el: '#app',
})
</script>
渲染结果
<div id="app">
<div class="container">
<div class="header">
<div>菜单栏头部</div>
</div>
<div class="main">
<span>vue2.x</span>
</div>
<div class="footer">
<div>菜单栏底部</div>
</div>
</div>
</div>
作用域插槽可以理解为通过子组件向父组件传递内容;
<template>
标签中的scope属性中定义任意变量 props; <div id="app">
<zszxz-component>
<template scope="props">
<span>vue2.x</span>
<p>{{props.msg}}</p>
</template>
</zszxz-component>
</div>
<script type="text/javascript">
Vue.component('zszxz-component',{
template: '<div class="container"> \
<div class="main"> \
<slot msg="知识追寻者"> </slot> \
</div> \
</div>',
});
var app = new Vue({
el: '#app',
})
</script>
渲染结果
vue2.x
知识追寻者
通过$slots
访问插槽,其返回是一个数组;
<div id="app">
<zszxz-component>
<span>vue2.x</span>
<div slot="header">菜单栏头部</div>
<div slot="footer">菜单栏底部</div>
</zszxz-component>
</div>
<script type="text/javascript">
Vue.component('zszxz-component',{
template: '<div class="container"> \
<div class="header"> \
<slot name="header"> </slot> \
</div> \
<div class="main"> \
<slot> </slot> \
</div> \
<div class="footer"> \
<slot name="footer"> </slot> \
</div> \
</div>',
mounted: function(){
var header = this.$slots.header;
var main = this.$slots.default;
console.log(header);
console.log(main);
}
});
var app = new Vue({
el: '#app',
})
</script>