1、设置子组件

let Child = { template:'#hi' }

2、在父组件中申明Child

let vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello',
    uname: '小王',
    age: 18
  },
  components: {
    Child
  }
})

3、在父组件中设置使用child组件

<div id="app">
  <Child></Child> 
</div>

4、在父组件中申明具名插槽

<div id="app">
  <Child>
    <!-- 具名插槽 -->
    <p slot="msg">{{msg}}</p>
    <p slot="uname">{{uname}}</p>
    <p slot="age">{{age}}</p>
  </Child>
</div>

5、在子组件中设置插槽

插槽一定是子组件视图层里的内容

子组件里面slot的特点:
1、没有内容传递过去的时候会显示插槽的(默认)内容
2、有内容传递过来的时候,不会显示插槽的(默认)内容

<template id="hi">
  <div>
    <p>子组件</p>
    <slot name="msg">我是插槽1</slot>
    <slot name="uname">我是插槽2</slot>
    <slot name="age">我是插槽3</slot>
  </div>
</template>

(1)父组件中设置具名插槽或者没有内容,子组件中的插槽slot标签中没有设置相关name,他会默认显示插槽里的内容

202105261621995144389808

202105261621995173690749

(2)父组件中不设置具名插槽,子组件不设置name属性,直接使用date里的数据,他会默认显示插槽默认的内容:

202105261621995667367919
202105261621995678198639
202105261621995784530382

(3)父组件设置了具名插槽,子组件设置了name属性,代码演示:

202105261621995240143687