一、插槽slot()
1.1简单插槽slot
【功能】用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容
parent.vue
【1】首先把child写成双标签样式,把要插入的内容放双标签中间
【注】如果要控制样式在父组件中,在子组件中写样式都可以
父组件
插入子组件的内容
import Child from './child';
export default{
name:'parent',
components:{
Child,
},
data(){
return{}
},
}
child.vue
【2】在子组件放个slot双标签接收父组件在双标签中插入的内容
子组件
如果没有传递内容则显示默认信息
export default{
name:'child',
data(){
return{}
},
}
App.vue
不重要
import Parent from './components/parent' //【1】第1步,引入子组件
export default {
name: 'App',
components: {
Parent //【3】第3步,把组件写到此处,目的是把它暴露出去
},
data () {//data必须是一个函数,此为标准es6写法,也可写成data:function()
return {
msg: 'hello',
}
},
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
效果:如下图,原写在父组件的内容,已经插入到子组件中了
1.2具名插槽(多个插槽-控制输入到子组件的不同位置)
parent.vue
【1】在child双标签下写入对应的内容,在标签上加个属性(
)(xxx为子组件中的name值)在标签中加上想插入的内容
父组件
插入子组件的内容——上
插入的内容——下
import Child from './child';
export default{
name:'parent',
components:{
Child,
},
data(){
return{}
},
}
child.vue
【1】对slot加个属性name=xxx,
子组件
后备内容
后备内容2
export default{
name:'child',
data(){
return{}
},
}
1.2.2插入一堆东西到子组件的插槽写法
只要把所子标签外面包一个父标签,把slot='name-value'放在父标签上即可
parent.vue
其它部分不变;
child.vue不变;
插入内容——上
插入内容——上2
插入内容——上3
插入的内容——下
插入的内容——下2
插入的内容——下3
效果:
1.3作用域插槽
parent.vue
【1】首先必须要在对应插槽名字的位置加个属性slot-scope='props';props可随意写,【2】处对应即可
【2】用{{props.text}}显示子组件插槽 传过来的数据
父组件
{{props.text}}
插入的数据——下1
插入的内容——下2
插入的内容——下3
import Child from './child';
export default{
name:'parent',
components:{
Child,
},
data(){
return{}
},
}
child.vue
【1】通过在插槽里放一个自定义属性text='待传递的数据'向父组件传数据
子组件
后备内容
后备内容2
export default{
name:'child',
data(){
return{}
},
}
效果:此即子组件的插槽向,父组件的对应插头传递的数据;
二、动态组件
2.1简单的动态组件切换写法
parent.vue
【0】写1个数据用来指向随便一个子组件名
【1】动态组件写法,在内部加上属性用来绑定数据部分
【2】切换子组件,利用在methods里的changeView函数实现
【3】改变数据里的指向为另一个子组件2,即可在component里实现组件视图的切换
父组件
切换到子组件2视图
import Child from './child';
import Child2 from './child2';
export default{
name:'parent',
components:{
Child,
Child2,
},
data(){
return{
currentView:"Child" //【0】写1个数据用来指向随便一个子组件名
}
},
methods:{
changeView(){
return this.currentView='Child2'//【3】改变数据里的指向为另一个子组件2,即可在component里实现组件视图的切换
}
}
}
child.vue
子组件1
export default{
name:'child',
data(){
return{}
},
}
child2.vue
子组件2
export default{
name:'child2',
data(){
return{}
},
}
结果:由子组件1切换到 子组件2.
2.2keep-alive标签把要来回切换的组件放到缓存中提高性能
keep-alive标签把要来回切换的组件放到缓存中提高性能,同时保持状态;
parent.vue
父组件
切换到子组件2视图
import Child from './child';
import Child2 from './child2';
export default{
name:'parent',
components:{
Child,
Child2,
},
data(){
return{
currentView:"Child",//【0】写1个数据用来指向随便一个子组件名
flag:true,//【2.0】设置一个标志
}
},
methods:{
changeView(){
if(this.flag){//【2.3】也是调用这个函数
this.currentView='Child';//【3】改变数据里的指向为另一个子组件2,即可在component里实现组件视图的切换
this.flag=false;
}else{
this.currentView='Child2';
this.flag=true;
}
}
}
}
child.vue
子组件1
export default{
name:'child',
data(){
return{}
},
}
child2.vue
子组件2
export default{
name:'child2',
data(){
return{}
},
}
2.2.1keep-alive保持状态效果
其它代码同上例,只有child.vue改变
child.vue
1、在数据里定义一个msg
2、用按钮改变它,因为parent.vue里用了keep-alive标签,所以改变后的msg信息不会变回之前
子组件1
{{msg}}
改变信息
export default{
name:'child',
data(){
return{
msg:'信息变之前',
}
},
methods:{
chMsg(){
this.msg='改变信息之后'
}
}
}
结果:
1、先点1号按钮改变子组件里的msg信息
2、再点2号按钮切换视图,再点回来,Msg改变后的信息没变(还是“改变信息之后”)