vue组件通信---子传父(ref方式)

  描述：

1.在子组件标签上使用“ref”获取子组件的dom信息；

2.在子组件中调用其他函数，使用 this.$emit(‘事件名’,参数) 的方法触发事件；

3.子组件的参数被传递出去,父组件接收到参数；

子组件son.vue代码如下：

 <template>
   <div class="son">
      <button @click="sendnumber">sendnumber</button>
   </div>
 </template>
 <script>
 export default {
   name: 'son',
   data () {
     return {
       num:10
     }
   },
   methods: {
      sendnumber(){
        //this.$emit(‘事件名’,参数) 的方法向父组件传值
        this.$emit('addnumber',this.num)
      }
   },
 }
 </script>

 父组件parent.vue代码如下：

 <template>
   <div class="parent">
     <son ref="sonMsg"></son>
   </div>
 </template>
 <script>
 import son from './son' //引入子组件
 export default {
   name: 'parent',
   components:{son},     //使用子组件
   data () {
     return {
       addnumber: ''
     }
   },
   mounted(){
     this.$refs.sonMsg.$on('addnumber', num =>{ 
   	   console.log(num+10);
   	   this.addnumber = num+10; 
     })
   }
   /*错误写法
   // 需要注意，$on中定义的函数this是指向调用该事件的组件，也就是子组件
   // 使用箭头函数可以避免this指向 “错误”
   mounted(){
   	  this.$refs.sonMsg.$on('addnumber', function(num){ 
   		console.log(num+10)
   		this.addnumber = num+10
      })
   }*/
 }
 </script>