W0407/vue/高阶/project1/src/App.vue

<template>
  <div>
    <Demo9></Demo9>
    <hr>
    <hr>
    <hr>
    <h1>第一个</h1>
    <!-- 3.使用组件 -->
    <Demo1 ref="getMain"></Demo1>
    <br />
    <Demo2 name="aa" :age="3" :dd="xxx"></Demo2>
    <hr />
    <Demo3 @getXX="getThing"></Demo3>
    <hr />
    <Demo4></Demo4>
    <hr />
    <hr />
    <Demo5 v-if="isShow"></Demo5>
    <button @click="isShow = !isShow">销毁demo5</button>
    <br />
    <hr />
    <Demo6>哈哈哈哈</Demo6>
    <Demo7>
      <template #main>
        <p>1111</p>
      </template>
      <template v-slot:header>
        <p>222</p>
      </template>
      <template #default>
        <p>333</p>
      </template>
    </Demo7>
    <Demo8>
      <template v-slot:x="data">
        <p>{{ data.obj1.name }}</p>
      </template>
    </Demo8>
  </div>
</template>

<script>
// 1.组件的引入
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";
export default {
  data() {
    return {
      xxx: "你好",
      isShow: true,
    };
  },
  // 2.组件的注册
  components: {
    Demo1,
    Demo2,
    Demo3,
    Demo4,
    Demo5,
    Demo6,
    Demo7,
    Demo8,
    Demo9
  },
  methods: {
    aa() {
      console.log("你好");
    },
    getThing(x) {
      console.log("触发事件" + x);
    },
  },
  mounted() {
    /**
     * 父组件：
     * 1.在想要获取的子组件上绑定ref='xxx'
     * 2.在挂载的生命周期上绑定事件
     * this.$refs.xxx.$on("事件名",事件)
     * 子组件：
     * 触发:this.$emit("事件名")
     * 解绑:this.$off("事件名")
     */
    this.$refs.getMain.$on("ab", this.aa);
    console.log(this.$refs.getMain.$on("ab", this.aa));
    // this.showMains();
  },
};
</script>

<style>
</style>