以下皆是老版本
1.插槽的基本使用
组件插槽的目的是为了让我们封装的组件更加具有扩展性 余留性空间
- 匿名插槽
<div id="app">
<cpn></cpn>
<cpn><span>span本人</span></cpn>//标签中间写的是插槽内的内容 老版本
<cpn><span v-slot:default>span本人</span></cpn> //新版本
<cpn> //标签内写了很多标签 但是只有一个插槽 标签替换默认值
<i>标签</i>
<button>按钮</button>
<button>按钮2</button>
</cpn>
</div>
<template>
<h2>我是组件</h2>
<p>我是组件哈哈哈</p>
<slot><button>按钮</button></slot> //1.插槽 留个地方 里面的东西是默认值 用的时候如果标签内写了新插入的内容则把默认值覆盖
</template>
<script>
const app = new Vue({
el:"#app",
data:{},
components:{
cpn:{
template:'#cpn'
}
}
})
</script>
- 具名插槽的使用
<div id="app">
<cpn><span slot="center">标题</span></cpn>
//只会替换slot属性的值等于插槽名字的
<cpn><span v-slot:center>标题</span></cpn>
//新版本的具名插槽
</div>
<template id="cpn">
<div>
//起个名字
<slot><span name="left">左边</span></slot>
<slot><span name="center">中间</span></slot>
<slot><span name="right">右边</span></slot>
</div>
</template>
<script>
const app = new Vue({
el:"#app",
data:{},
components:{
cpn:{
template:'#cpn'
}
}
})
</script>
2.编译作用域
父子间模板的所有东西都会在父级作用域内编译,子组件模板模板的所有东西都会在子级作用域内编译
自己理解:组件在哪用 作用域就在哪????
3.作用域插槽
父组件替换子组件插槽内的标签,但是数据由子组件提供(在父组件中拿到子组件里的值)
<div id="app">
<cpn>
//2.引用一个slot-scope="slot"
<template slot-scope="slot">
//3.是使用值
<span v-for = "item in slot.data"></span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
//1.绑定pLanguages值为一个属性 :data可以随便命名
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script>
const app = new Vue({
el:"#app",
data:{},
components:{
cpn:{
template:'#cpn',
data(){
return{
pLanguages:['java','c++','Go']
}
}
}
}
})
</script>