作用于插槽语法

      了解：

              1、父组 想把某些数据显示在 子组：父亲给子组件通信

              2、父组 想控制子组件某些 部分HTML结构：插槽

              3、父组 (子组件内部有些初始化数据)，既 要控制结构，又要显示子组件内数据 作用域插槽（把子组件数据反出来）

定义子组件:

<template>
  <div class="shi">
    <h1>诗的题目</h1>
    <div class="box">
      <!-- 1. 子组件 slot 绑定属性名="变量值"  把绑定数据 暴露给了父级-->
      <slot :obj="obj">
        <p>{{obj.msg1}}</p>
        <p>{{obj.msg1}}</p>
        <p>{{obj.msg1}}</p>
        <p>{{obj.msg1}}</p>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        msg1: "子组件的默认一个信息1",
        msg2: "子组件的默认一个信息2",
      },
    };
  },
};
</script>

<style scoped>
.box {
  width: 400px;
  box-shadow: 0 0 10px #000;
}
</style>

定义父组件:

<template>
  <div>
    <h1 v-bgc>5 插槽 作用域插槽</h1>
    <h4 v-bgc>

    </h4>
    <!-- 2.父组件：子组件内部 写入要替换HTML结构 v-slot="scope"  scope变量(自己起名字)：把子组件  {row:obj}-->
    <one>
      <template #default="getSon">
        <h3>{{getSon.obj.msg2}}</h3>
        <h3>{{getSon.obj.msg2}}</h3>
        <h3>{{getSon.obj.msg2}}</h3>
        <h3>{{getSon.obj.msg2}}</h3>
      </template>
    </one>
  </div>
</template>

<script>
import one from "../components/05/one.vue";


export default {
  components: {
    one,
  },
};
</script>

<style>
</style>

// 发现：
//     这几个组件，大概HTML结构是一样，但是只有某些个部分HTML不一样
//     把该组件复制了一份！
//     需要一个知识：解决大部分结构一样，不一样地方我们去通过父级组件控制它！叫插槽！

// 父级--->子组件
//    1.传入数据：多个子组件HTML  样式 交互行为都是一样，就是显示数据不一样！
//    2.父组件  通过this.$refs 获取子组件的 实例化对象； 使用属性和方法；
//    3,子组件某些地方HTML不一样，用插槽语法，父亲传入不同HTML结构！