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-os