组件开发&&slot-插槽的基本使用

父子组件的访问方式：$children

通过this.$children[].属性 来访问。

子组件访问父组件 $parent

通过this.$parent.属性 来访问

访问根组件 $root

slot翻译为插槽类似与预留的空间

<div id="app">
<!--  什么是编译作用域-->
<!--  什么是作用域插槽-->
<!--  父组件替换插槽的标签，但是内容确实由子组件来提供的-->
  <cpn v-show="isShow"></cpn>
  <cpn v-show="isShow" >
    <template slot-scope="slot">
<!--      遍历子组件中绑定的数据-->
      <span v-for="item in slot.data">{{item}}  </span>
    </template>
  </cpn>
</div>
<template id="cpn">
  <div>
    <h2>你好我是组件标题</h2>
<!--    将子组件数据绑定到插槽中送到父域中-->
    <slot :data="pLangues">
      <ul>
        <li v-for="item in pLangues">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template:'#cpn',
    data(){
      return{
        isShow: false,
        pLangues: ['C++', 'Python', 'C#', 'Java']
      }
    },
  }
  const app = new Vue({
    el:'#app',
    data:{
      isShow:true,
    },
    components:{
      cpn
    }
  })
</script>