vipAllDay/vue/vue高阶/comm/src/App.vue

<template>
  <div class="app">
    <h1>组件通信</h1>
    <Demo1 ref="getMain"></Demo1>
    <hr />
    <Demo2 :name="a" sex="女" :age="10"></Demo2>
    <hr />
    <Demo3 @getName="getName"></Demo3>
    <hr />
    <Demo4></Demo4>
    <hr />
    <Demo5></Demo5>
    <hr />
    <Demo6></Demo6>
    <hr />
    <Demo7></Demo7>
    <hr />
    <Demo8>
      <!-- 默认插槽 -->
      <slot></slot>
    </Demo8>
    <hr />
    <Demo9>
      <template v-slot:header>
        <slot>哈哈哈</slot>
      </template>
      <template #footer>
        <slot>哒哒哒</slot>
      </template>
      <template #default>
        <slot>呵呵呵</slot>
      </template>   
    </Demo9>
    <hr />
    <Demo10>
      <template v-slot="data">
      <slot>{{ data.obj.description }}</slot>
      </template>
    </Demo10>
    <hr />
    <Demo11 title="综合演示">
      <template v-slot:main="{holiday1}" >
        <slot>
          <div  v-for="(item,index) in holiday1" :key="index">
            {{item}}
          </div>
        </slot>
      </template>
      <template #default>
        <slot>就不告诉你</slot>
      </template>
    </Demo11>
    <hr>
    <Demo12></Demo12>
  </div>
</template>
<script>
import Demo1 from "./components/Demo1.vue";
import Demo2 from "./components/Demo2.vue";
import Demo3 from "./components/Demo3.vue";
import Demo4 from "./components/Demo4.vue";
import Demo5 from "./components/Demo5.vue";
import Demo6 from "./components/Demo6.vue";
import Demo7 from "./components/Demo7.vue";
import Demo8 from "./components/Demo8.vue";
import Demo9 from "./components/Demo9.vue";
import Demo10 from "./components/Demo10.vue";
import Demo11 from "./components/Demo11.vue";
import Demo12 from "./components/Demo12.vue";
export default {
  data() {
    return {
      msg: "哈哈哈哈",
      a: "小李",
    };
  },
  components: {
    Demo1,
    Demo2,
    Demo3,
    Demo4,
    Demo5,
    Demo6,
    Demo7,
    Demo8,
    Demo9,
    Demo10,
    Demo11,
    Demo12
  },
  methods: {
    ab() {
      console.log("明天休息", this.msg);
    },
    getName(name) {
      console.log("我叫" + name);
    },
  },
  mounted() {
    /**
     * on     绑定上
     * emit   监听
     * off    解绑
     * */
    this.$refs.getMain.$on("aa", this.ab);
  },
  destroyed() {
    this.$refs.getMain.$off("aa", this.ab);
  },
};
</script>
<style scoped></style>