slot
在原来的父组件基础上增强功能或扩展功能,在子组件里面预留的插槽可以添加要显示的功能,使用技巧:slot
封装一些相同不变的功能,方便使用。
具名插槽
一、创建一个子组件,使用<slot name="a" />
标签,套上要显示的默认元素,这个默认元素,如果父组件里面没有调用这个selot
插槽,则默认显示子组件里面的元素。
子组件HelloWorld9
<template>
<div>
<slot name="a"><h1>子组件默认功能1</h1></slot>
<slot name="b"><h1>子组件默认功能2</h1></slot>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld9",
data() {
return {
msg:'子组件9',
}
}
}
</script>
<style scoped>
</style>
HelloWorld9父组件
在父组件往子组件插入功能,匿名插槽
不使用名字,会覆盖
其它插槽,
<template>
<div>
<h2>{{msg}}</h2>
<!-- <hello-world9></hello-world9>-->
<!-- 不使用名字,在父组件往子组件插入功能,会覆盖其它功能 -->
<hello-world9>
<button slot="a">子组件按钮增强功能</button>
</hello-world9>
</div>
</template>
<script>
import HelloWorld9 from "./HelloWorld9";
export default {
components: {HelloWorld9},
name: "HelloWorld8",
data() {
return {
msg: '父组件8'
}
}
}
</script>
<style scoped>
</style>
二、作用域插槽
在子组件里面的插槽套上标签的元素,元素中数据修改只能在子组件修改,界面是在父组件显示。
现在的要求是在父组件里面修改展示方式
,注意数据是不能在父组件修改的
子组件中声明slot 标签套上要展示的元素
,并且在slot标签上绑定:变量名 = 变量值
。
此变量名要在父组件中点.
出来
子组件
<template>
<div>
<slot :dataUser="dataArr">
<ui>
<li v-for="item in dataArr"> {{item}}</li>
</ui>
</slot>
</div>
</template>
<script>
export default {
name: "HelloWorld9",
data() {
return {
msg: '子组件9',
dataArr: ['liyongbo', 'bobo', 'bo', '子组件数据'],
}
}
}
</script>
<style scoped>
</style>
父组件中 template
标签套上要展示的元素,在2.5以上可以是元素
,一定要在标签上起名字 slot-scope="user"
此名可以随便起,里面的元素通过user.dataUser
,点出子组件中声明的变量名 :
其实v-bind:变量名 = 变量引用 ,可以看做 b赋值给a 操作 a = b ,b这边就可以有表达式动态计算,来改变页面。就得出结论,只能在代码里面计算,不能在页面中根据输入计算,此时要用到v-model
父组件
<template>
<div>
<h2>{{msg}}</h2>
<hello-world9>
<template slot-scope="user">
<h1 v-for="item in user.dataUser">{{item}}</h1>
</template>
</hello-world9>
</div>
</template>
<script>
import HelloWorld9 from "./HelloWorld9";
export default {
components: {HelloWorld9},
name: "HelloWorld8",
data() {
return {
msg: '父组件8'
}
}
}
</script>
<style scoped>
</style>
此时样式前面点.
改变了