Vue_Demo/20_脚手架/vue_code/09.src_自定义事件/App.vue

<template>
  <div class="app">
    <h1>{{ msg }}{{stuName}}</h1>
    <!--   通过父组件给子组件传递函数，间接获取子组件数据  -->
    <School :getSchoolName="getSchoolName"/>
    <!--   通过父组件给子组件绑定一个自定义事件，实现给父传递数据，使用v-on或@方式  -->
    <!--    <Student v-on:studentName="getStudentName"/>-->
    <Student @studentName="getStudentName" @demo="method1" @click.native="show"/>
    <!--    <Student @studentName.once="getStudentName"/>-->
    <!--   通过父组件给子组件绑定一个自定义事件，实现给父传递数据,使用ref方式  -->
    <!--    <Student ref="student"/>-->
  </div>
</template>

<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";

export default {
  name: "App",
  components: {
    School,
    Student
  },
  data() {
    return {
      msg: "Hello:",
      stuName: ""
    }
  },
  methods: {
    getSchoolName(schoolName) {
      console.log("获取学校名称", schoolName)
    },
    getStudentName(name, ...params) {
      console.log("getStudentName", name, params)
      this.stuName = name
    },
    method1() {
      console.log("demo自定义事件被调用！")
    },
    show() {
      alert("组件点击事件")
    }
  },
  mounted() {
    // 正常写法
    // this.$refs.student.$on("studentName", this.getStudentName)
    // 可以设置只执行一次
    // 可以加延时
    // this.$refs.student.$once("studentName", this.getStudentName)
    // setInterval(() => {
    //   this.$refs.student.$on("studentName", this.getStudentName)
    // }, 3000)
  }
}
</script>

<style>
.app {
  background-color: gray;
  padding: 15px
}
</style>