1.插槽的简单使用
<body>
<div id="app">
<!-- 如果插槽没有替换的 就使用默认值 -->
<cpn></cpn>
<!-- 如果插槽没有替换的 就替换 -->
<cpn><p>替换默认值</p></cpn>
</div>
<template id="cpn">
<div>
<h2>这里是组件</h2>
<!-- 在组件中声明一个插槽 并且给一个默认值 默认值也可以为空 -->
<slot><button>按钮</button></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el:"#app",
data:{
message:"hello VUE!"
},
components:{
cpn : {
template: "#cpn"
}
}
})
</script>
</body>
在组件中声明一个插槽
<template id="cpn">
<div>
<h2>这里是组件</h2>
<!-- 在组件中声明一个插槽 并且给一个默认值 默认值也可以为空 -->
<slot><button>按钮</button></slot>
</div>
</template>
使用组件时 可以替换插槽 如果不替换插槽就使用默认值
<div id="app">
<!-- 如果插槽没有替换的 就使用默认值 -->
<cpn></cpn>
<!-- 如果插槽没有替换的 就替换 -->
<cpn><p>替换默认值</p></cpn>
</div>
2.具名插槽
<body>
<div id="app">
<!-- 指明需要替换的插槽 如将组件中test1插槽的按钮 替换成<a></a>标签 -->
<cpn><a slot="test1" href="">用a标签替换按钮</a></cpn>
<!-- 将组件中的test2中的内容替换 -->
<cpn><p slot="test2">趣多多好吃,就是吃多了腻</p></cpn>
</div>
<template id="cpn">
<div>
<h2>这里是组件</h2>
<slot name="test1"><button>按钮</button></slot>
<slot name="test2"><p>蛋黄卷好吃</p></slot>
<slot name="test3"><input placeholder="请输入内容">按钮</input></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el:"#app",
data:{
message:"hello VUE!"
},
components:{
cpn : {
template: "#cpn"
}
}
})
</script>
</body>
在组件中为插槽起名字
<template id="cpn">
<div>
<h2>这里是组件</h2>
<slot name="test1"><button>按钮</button></slot>
<slot name="test2"><p>蛋黄卷好吃</p></slot>
<slot name="test3"><input placeholder="请输入内容">按钮</input></slot>
</div>
</template>
使用组件时 替换插槽内容时 要指定插槽某个插槽
<div id="app">
<!-- 指明需要替换的插槽 如将组件中test1插槽的按钮 替换成<a></a>标签 -->
<cpn><a slot="test1" href="">用a标签替换按钮</a></cpn>
<!-- 将组件中的test2中的内容替换 -->
<cpn><p slot="test2">趣多多好吃,就是吃多了腻</p></cpn>
</div>
3.编译作用域概念
举例 : 实例里面的isShow 和 子组件中的isShow
<body>
<div id="app">
<!-- 这里的isShow使用的是实例里面的变量,而不是模板中的变量 -->
<!-- 使用变量时 会先去找变量所在的模板使用模板中的值 -->
<cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
<div>
<h2>这里是组件</h2>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el:"#app",
data:{
message:"hello VUE!",
isShow: true
},
components:{
cpn : {
template: "#cpn",
data(){
return{
isShow: false
}
}
}
}
})
</script>
</body>
</html>
4.作用域插槽
父组件之中想要使用子组件的变量 由于编译作用域的问题不能直接使用
可以使用作用域插槽解决问题:
子组件插槽中绑定子组件的变量 :xxx="变量名"
<slot :abc="list">
父组件使用子组件
<template v-slot="slot">
<span v-for="item in slot.abc">{{item}}</span>
</template>
image-20200228200950573.png
<body>
<div id="app">
<!-- 这里的list使用的是实例里面的变量,而不是模板中的变量 -->
<cpn><span v-for="item in list">{{item}}</span></cpn>
<!-- 作用域插槽 -->
<cpn>
<!-- vue2.5 以上可以不用template 用div也行 -->
<template v-slot="slot">
<span v-for="item in slot.abc">{{item}}</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<h2>这里是组件</h2>
<!-- 插槽传递数据名字随意取 -->
<slot :abc="list">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el:"#app",
data:{
message:"hello VUE!",
isShow: true,
name: "李四",
list: ['合肥','南京','常州','上海','杭州']
},
components:{
cpn : {
template: "#cpn",
data(){
return{
isShow: false,
list: ['张三','李四','王五','张刚','胡凯']
}
}
}
}
})
</script>
</body>
网友评论