插槽
通过插槽才能向组件内添加内容，在注册组件时添加
eg： template:<header><slot></slot></header>
应用 时就可以写入其他内容
<el-header><h1>标题</h1><p>哈哈哈哈</p></el-header>
后备内容
后备内容的添加，没有插入其他内容的时候默认显示插槽内容
<slot>后备内容</slot>
编译作用域
应用组件时，在插槽中访问数据，访问到的是vue实例里的数据，不会访问到组件中的数据
<body>
<div id="app">
<el-div>
//这里的a输出的是实例里的data的a 11而不是组件里的10
{{a}}
</el-div>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('el-div',{
template:`<h1><slot>备用内容<slot></h1>`,
data(){
return {
a:10
}
}
})
new Vue({
el:'#app',
data:{
a:11
}
})
</script>
</body>
具名插槽
一个组件中需要多个插槽的时候，需要对插槽进行命名 name=’ ’
一个不带
name的<slot>会带有隐含的名字“default”。
template: `<el-header>
<header><slot name='header' :con='content1'></slot></header>
<main><slot name='main' :con='content2'></slot></main>
<footer><slot name='footer' :con='content3'></slot></footer>
//匿名插槽 隐含的名字“default”。
<slot :con='content4'></slot>
</el-header>`,
在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot:插槽名 指令，
也可以在一个 <template> 中包裹默认插槽的内容，默认插槽的name是default
<template v-slot:footer>
<h1>底部内容</h1>
</template>
v-slot:footer-------#footer
缩写 v-slot:插槽名=缩写为===== #插槽名
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
