Vue 自定义事件实现子组件数据向父组件传输

除了props子组件给父组件传输，还可以用自定义事件实现子组件数据向父组件传输。

第一种方式: 通过父组件给子组件绑定一个自定义事件实现子给父传数据 使用v-on或@ 结合student.vue中的sendStudentName 的emit。 如果只能点击一次则

v-on:studentName.once

App.vue

<template>
  <div id="app">
  <student v-on:studentName="getStudentName"></student>

    <!-- 点击 把学生名给App按钮 namestudent就会显示  -->
    <h2>获取到的student中的name:{{namestudent}}</h2>
  </div>
</template>

<script>
import student from './components/study/student.vue'
export default {
  name: 'App',
  components:{
    student
  },
  data(){
    return{
      namestudent:'',          
    }
  },
  //methods里面方法可以随意调用不用在div中必须存在方法名
  methods:{
    //下面两个方法一样的用哪个都行
    // getStudentName(name,x,y){
    //    console.log("App收到学生名是:",name,x,y);
    // }
    
    //...params （es6写法）  代表除name外 其他输出成一个数组
    getStudentName(name,...params){
       console.log("App收到学生名是:",name,params);
       this.namestudent = name;
       //输出  App收到学生名是: lj (2) [666, 999]
    }
  }
}
</script>

传输多个自定义事件：

 <student v-on:studentName="getStudentName"  v-on:studentName1="getStudentName1"></student> 

student.vue

<template>
    <div class="stu">
      <button @click="sendStudentName">把学生名给App</button>
    </div> 
</template>
  
  <!--组件数据交互-->
  <script>
    //这样写法更加简洁，这样用的多
    export default {
          //代表组件名称，最好与 school.vue中的school一致
          name:'student',
          data(){
              return{}
          },
          methods:{
            sendStudentName(){
              //<student v-on:studentName="getStudentName"></student> studentName和 ‘studentName’ 同一个
              this.$emit('studentName',this.name,666,999);
           }
     }
   }
 }
  </script>

第二种方式：通过父组件给子组件绑定一个自定义事件实现子给父传数据 使用ref和mounted 结合student.vue中的sendStudentName 的emit

App.vue如下 $emit写法和上面student.vue中一样

<template>
  <div id="app">
    <!--其实比1麻烦点，但是易于扩展，比如还可以加定时器-->
    <student ref="student"></student>

    <!-- 点击 把学生名给App按钮 namestudent就会显示  -->
    <h2>获取到的student中的name:{{namestudent}}</h2>
  </div>
</template>

<script>
import student from './components/study/student.vue'
export default {
  name: 'App',
  components:{
    student
  },
  data(){
    return{
      namestudent:'',          
    }
  },
  //methods里面方法可以随意调用不用在div中必须存在方法名
  methods:{
    //...params （es6写法）  代表除name外 其他输出成一个数组
    getStudentName(name,...params){
       console.log("App收到学生名是:",name,params);
       this.namestudent = name;
       //输出  App收到学生名是: lj (2) [666, 999]
    }
  },
  mounted(){
   setTimeout(()=>{
    //App.vue中this.$emit('studentName',this.name);中studentName 和下面studentName一样
    //getStudentName 是methods中的getStudentName
    this.$refs.student.$on('studentName',this.getStudentName)
    
    //上面的替代。把methods里面getStudentName方法去掉。  =>函数 是没有自己的this的所以得往外找就是App的区域了那this就是App
    // this.$refs.student.$on('studentName',(name,...params)=>{
    //   //=>{} 里面写this就是App的
    //   console.log("App收到学生名是:",name,params);
    //    //输出  App收到学生名是: lj (2) [666, 999]
    // })
   },3000)
  }
}
</script>

特别注意：

1.如果组件里面写了@click这种dom的操作事件，组件会认为这是个自定义事件。所以要想为组件中的dom操作事件，只需要 @click.native加个native即可。
2. this.$refs.student 这里this指的是student组件并不是App,student触发则this就是student。如果是this.getStudentName getStudentName是App.vue method里面方法则这个里this就是App。如果mounted里面写的是普通function方法则这里this也是App。
3.只触发一次则this.$refs.student.$once('studentName',this.getStudentName)再点击没反应。