vue插槽样式_三、深入Vue组件——Vue插槽slot、动态组件

一、插槽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改变后的信息没变(还是“改变信息之后”)