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，他会默认显示插槽里的内容

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

（3）父组件设置了具名插槽，子组件设置了name属性，代码演示：