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

<template>
  <div class="app">
    你好
    <!-- 3.使用组件 -->
    <Demo1 name="哈哈哈" sex="女" :age="10"></Demo1>
    <!-- 演示ref -->
    <p ref="aaa">hello</p>
    <Demo2 ref="main"></Demo2>
    <Demo3 @getThing="getThing"></Demo3>
    <Demo4></Demo4>
    <Demo5></Demo5>
    <input type="text" v-model="keys" />
    <Demo6>
      <div v-if="keys > 20">
        <slot>你好啊</slot>
      </div>
    </Demo6>
    <hr>
    <Demo7>
      <template #header>
        我是头部
      </template>
      <!-- <slot>我是主体</slot> -->
      <template #default>
        <div>
          我是主体
        </div>
      </template>
      <template v-slot:footer>
        <div>
          我是内容
        </div>
      </template>
    </Demo7>
    <Demo8>
      <template v-slot="data">
        <div>
          {{ data.obj.name }}
        </div>
      </template>
    </Demo8>
    <Demo9 title="一个小案例">
      <template v-slot:main="{aa}">
        <ul v-for="(item,index) in aa" :key='index'>
          <li>
            {{index+1}}--{{ item }}
          </li>
        </ul>
      </template>
      <slot>结尾</slot>
    </Demo9>
    <button @click="showMain">显示mixin内容</button>
    <hr>
    <hr>
    <Demo10/>
  </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";
import Demo10 from "./components/Demo10.vue";
export default {
  data() {
    return {
      a: 20,
      keys: "",
    };
  },
  // created() {
  //   console.log(this.$refs,'aaa')
  // },
  // 2.注册
  components: {
    Demo1,
    Demo2,
    Demo3,
    Demo4,
    Demo5,
    Demo6,
    Demo7,
    Demo8,
    Demo9,
    Demo10
  },
  methods: {
    getMsg() {
      alert("你好");
    },
    getThing(b) {
      console.log("今天是" + b);
    },
  },
  mounted() {
    this.$refs.main.$on("happy", this.getMsg);
  },
};
</script>

<style></style>