VIP26/day29/hello/src/App.vue

<template>
  <div id="app">
      <!-- 3.使用组件 -->
      <Demo @wxChat="qq"></Demo>
      <p ref="aaa" @click="showMsg">标签一</p>
      <p ref="bbb">标签二</p>
      <p ref="ccc">标签三</p>
      <!-- 组件通信 -->
      <!-- 子组件 -->
      <Demos :age="20" name="LiLi" sex="女" ref="getAge"></Demos>
      <button @click="showTitle">调用</button>
      <!-- 自定义事件 -->
      <newDemo @smile="getSmile"></newDemo>
      <!-- 
        第一种：
        父：
        在模板中：自定义事件 v-on/@事件名="自定义方法"
        在方法里：自定义方法（接参）{执行的代码}
        子：
        在方法中：this.$emit("监听的事件名",传参)
        第二种：
        父：
        在组件位置：ref="xxx"
        在方法里：
        在挂载后周期mounted(){this.$refs.xxx.$on('监听方法名',调用的方法)}
        子:
        在方法里：this.$emit("监听方法名")
        解绑：
          this.$off()


        $on 提供数据
        $emit 获取数据
        $off 解绑数据
       -->
       <!-- 
        全局事件 : main.js => Vue.prototype.$bus = this
        -->
        <List></List>
        <Main></Main>
  </div>
</template>
<script>
  // 1.引入组件
import Demo from '@/components/Demo.vue';
import Demos from '@/components/Demos.vue';
import newDemo from '@/components/newDemo';
import List from '@/components/List';
import Main from '@/components/Main';
// 1.引入mixin
import {mixin} from './utils/mixin';
  export default {
    data() {
      return{
        aaa:'1',
      }
    },
    // 2.mixin使用
    mixin:[mixin],
    // 2.注册组件
    components:{
      Demo,
      Demos,
      newDemo,
      List,
      Main
    },
    methods:{
      // ref绑定信息 使用方法 ：
      // 在template部分 绑定标签 ref='xxx'
      // 调用 this.$refs.xxx
      showMsg() {
        console.log("信息");
        console.log(this.$refs.aaa,"信息");
        console.log(this.$refs.bbb,"信息");
        console.log(this.$refs.ccc,"信息");
      },
      getSmile(name) {
        console.log("获得" + name +'的微笑');
      },
      qq(name,...prams) {
        console.log("获得" + name +'的微笑',...prams);
      },
      aa() {
        console.log("成功了")
      }
    },
    mounted() {
      // this.$refs.名字.$on("字定义",this.aa)
      this.$refs.getAge.$on("ab",this.aa)
    }
  }
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

</style>