1.插槽之单个插槽（默认插槽） 子组件 在父级引用 父级输入下面的内容不会显示 需要用到插槽

如下图：

<template>
  <div class="slot-child">
    我是slot 的子主键
    <slot></slot> 如果不加这个不会显示
  </div>
</template>
<script>
export default {
  name: 'SlotChild',
  data () {
    return {
      msg: 'j'
    }
  }
}
</script>

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <p v-if="seen">hello,dsf</p>
    <input v-model="parentMsg"/>
<!--    <runoob v-bind:message="parentMsg"></runoob>
    <ol>
      <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
    </ol>
    <div class="example">
      <p>{{total}}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>-->
    <SlotChild>dsfsdfdsfsdfsdfdssdfsdfsdfsd</SlotChild>
  </div>
</template>

<script>
import SlotChild from '@/components/SlotChild'
export default {
  name: 'HelloWorld',
  components: {SlotChild},
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      seen: true,
      parentMsg: '父级内容ss',
      sites: [
        {text: 'Runoob'},
        {text: 'Google'},
        {text: 'Taobao'}
      ],
      total: 0
    }
  },
  component: {
    SlotChild
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  },
  created: function () {
    console.log('sdfds')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>