VIP32/vue2.0/vue高阶/hello_vue/src/App.vue

<template>
  <div id="app">
    <input v-model="day" />
    <div @click="showMsg" ref="aaa">标签</div>
    <Demo2 name="LiLi" sex="女" :age="20"></Demo2>
    <!-- 
      组件通信：
        父组件 template标签中 ref="名称<aaa>"
              mounted() this.$refs.aaa.$on("自定义的方法名<xx>",传送的方法)
     -->
    <Demo1 ref="getMain"></Demo1>
    <!-- <button >按钮</button> -->
    <hr>
    <Demo3 ref="getThing"></Demo3>
    <hr>
    <Demo4 @getName="getName"></Demo4>
    <Demo5></Demo5>
    <Demo6></Demo6>
  </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';
export default {
  name:"App",
  data() {
    return {
      day:"星期三",
      happy:"开心"
    }
  },
  components:{
    Demo1,
    Demo2,
    Demo3,
    Demo4,
    Demo5,
    Demo6
  },
  created() {
    console.log(this.day)
  },
  methods: {
    aa() {
      console.log("成功了")
    },
    showMsg() {
      console.log(this.$refs.aaa,'ref属性')
    },
    showMain() {
      alert("看屏幕")
    },
    getName(name) {
      console.log(name + '吃的真香');
    }
  },
  mounted() {
    this.$refs.getMain.$on("aab",this.aa)
    // console.log(this.$refs.xxx)
    this.$refs.getThing.$on("happy",this.showMain)
  },
}
</script>

<style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>