Vue学习笔记二：props、$ref、$emit、$on 的使用方法详解

一、props

$ref 和 props 都可以实现父组件向子组件通信。
props 通过在子组件中声明自定义的属性，在父组件中可以使用它们，如

//子组件
<template>
  <div>
    <h3>{{ocean01}}</h3>
    <h3>{{ocean02}}</h3>
  </div>
</template>
<script>
export default{
  name: 'Child',
  props: [
    'ocean01',    // 声明自定义的属性
    'ocean02'
  ]
}
</script>

则在父组件中可以通过（1）直接通过属性传递数据；（2）通过JavaScript表达式进行动态赋值，如：

<template>
  <div>
    <h1>我是父组件！</h1>
    <!--通过自定义属性传递数据-->
    <child ocean01="我是子组件一！"></child>
    <!--用一个JS表达式进行动态赋值，v-bind简写为冒号-->
    <child v-bind:ocean02="a+b"></child>
    <!--用一个变量进行动态赋值，v-bind简写为冒号-->
    <child v-bind:ocean02="tms"></child>
  </div>
</template>
<script>
import Child from '../components/Child.vue'
export default{
  name:'Father',
  components: {
    Child
  },
  data(){
    return{
      a:'我是子组件二！',
      b:'112233',
      tms: '我是子组件三！'+ Math.random()
    }
  }
}
</script>

结果为：

二、$ref

$ref 和 props 都可以实现父组件向子组件通信。
props 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用 prop；
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且 ref 用在 dom 元素的时候，能起到选择器的作用，这个功能比作为索引更常见。

//子组件
<template>
  <div>
    <h3>{{ocean03}}</h3>
  </div>
</template>
<script>
export default{
  name: 'child',
  data(){
    return{
      ocean03: ''  //props和$ref都可以实现父组件向子组件通信。
    }              //prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
  },         //$ref着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能起到选择器的作用，这个功能比作为索引更常有用到。
  methods:{
    getMessage(m){
      this.ocean03 = m;
    }
  }
}
</script>

父组件为：

//父组件
<template>
  <div>
    <h1>我是父组件！</h1>
    <child ref="qwe"></child>
  </div>
</template>
<script>
import Child from '../components/Child.vue'
export default{
  name:'Father',
  mounted(){
    console.log(this.$refs.qwe);
    this.$refs.qwe.getMessage('测试下refs通过方法传数据')
  },
}
</script>

结果为：

三、$emit

通过 $emit(eventName,msg)触发事件，子组件给父组件传递数据，父组件通过 $on:eventName 监听事件，接收数据。

//子组件
<template>
  <div>
    <h3>我是子组件</h3>
  </div>
</template>
<script>
export default{
  name: 'ChildA',
  mounted(){                            //通过$emit(eventName,msg)子组件给父组件传递数据，父组件通过@eventName接收数据
    this.$emit('getChildData','我是子组件传递给父组件的数据') //$emit(event,args)触发事件event，并且传递参数args
  }
}
</script>

//父组件
<template>
  <div>
    <h1>我是父组件！</h1>
    <child-a @getChildData="showMsg"></child-a>
    <h1>{{title}}</h1>
  </div>
</template>
<script>
import ChildA from '../components/ChildA.vue'
export default{
  name:'FatherA',
  components: {
    ChildA
  },
  data(){
    return{
      title:''
    }
  },
  methods:{
    showMsg(args){
      this.title = args;
    }
  }
}
</script>

结果为：

四、$on

$on 是监听子组件 $emit 事件的变化，从而触发某个事件，这里再举个例子

//子组件
<template>
  <div>
    <span>子组件：</span>
    <span @click="select(0,$event)" :class="{'active': selectType===0}">测试0、</span>
    <span @click="select(1,$event)" :class="{'active': selectType===1}">测试1、</span>
    <span @click="select(2,$event)" :class="{'active': selectType===2}">测试2</span>
  </div>
</template>
<script>
export default{
  name: 'TestSon',
  data(){
    return {
      selectType: 0
    }
  },
  methods:{
    select(type,event){
      this.selectType = type
      this.$emit('select-type',type)  //通过$emit(eventName,msg)子组件给父组件传递数据，父组件通过@eventName接收数据
    }
  }
}
</script>
<style>
.active{
  color: yellow;
}
</style>

//父组件
<template>
  <div>
    <test-son @select-type="onSelectType"></test-son>
    <h2>这是父组件的：{{selectType}}</h2>
  </div>
</template>
<script>
import TestSon from '../components/TestSon.vue'
export default{
  name: 'TestFather',
  components: {
    TestSon
  },
  data(){
    return{
      selectType: 0,
    }
  },
  methods:{
    onSelectType(type){
      this.selectType=type
    }
  }
}
</script>

结果为：