vue中的父子组件之间的数据传递之props、$ref和$emit

之前大部分时候都是在用angular开发项目，vue用的很少，不过现在也逐渐在用vue开发一些项目了，于是就想着把vue熟悉并总结一下。
vue的组件化思想，其中组件之间数据的传递很重要，我感觉很有必要把它总结一下。好了，开始正题：
props是用于数据之间的传递（父组件向子组件），ref也可以用于数据之间的传递（ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过ref可能获取到在子组件里定义的属性和方法。），$emit是用于事件之间的传递（子组件触发父组件里面的方法）。

1.props是用于父组件向子组件传递数据信息（props是单向绑定的，即只能父组件向子组件传递，不能反向。）
例如（借鉴了别人写的例子）：

<!-- 父组件 -->
<template>
 <div>
  <h1>我是父组件！</h1>
  <child message="我是子组件一！"></child>
 
  <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
  <child v-bind:message="a+b"></child>
 
  <!-- 用一个变量进行动态赋值。-->
  <child v-bind:message="msg"></child>
 </div>
</template>
 
<script>
import child from '../components/child.vue'
export default {
 components: {child},
 data() {
  return {
   a:'我是子组件二！',
   b:112233,
   msg: '我是子组件三！'+ Math.random()
  }
 }
}
</script>

<!-- 子组件 -->
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
  props: ['message']
 }
</script>

视图效果如下：
在这里插入图片描述

可以看到子组件中用props来接受从父组件传过来的message的数据信息。从父组件传递过来的数据没有限制，可以是字符串，表达式，对象等。
其中父组件中的components: {child},需要特别注意一下，这是借鉴了es6中的内容，完整的写法应该是：components: {child:child},这里child就作为标签名了，如果import child from '…/components/child.vue’中的child写成Child，那么components: {child:Child},这里标签名还是child，当然也可以直接写为components: {Child},这时候标签名就变成了Child了。

2.通过ref 实现通信
对于ref官方的解释是：ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 refs 对象上。
那应该怎么理解？看看下面的解释：
1.如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过ref可能获取到在子组件里定义的属性和方法。
2.如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。

那如何通过ref 实现通信？下面就将上面prop实现的功能，用ref实现一遍：

<!-- 父组件 -->

<template>
  <div>
    <h1>我是父组件！</h1>
    <child ref="msg"></child>
  </div>
</template>

<script>
  import child from '../components/child.vue'
  export default {
    components: {child},
    mounted: function () {
      console.log( this.$refs.msg);
      this.$refs.msg.getMessage('我是子组件一！')
    }
  }
</script>

<!-- 子组件 -->
 
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
  data(){
   return{
    message:''
   }
  },
  methods:{
   getMessage(m){
    this.message=m;
   }
  }
 }
</script>

效果图如下：
在这里插入图片描述
下面再看一下ref是如何获取dom元素的
代码如下：

<template>
  <div id="app">
    <div ref="testDom">11111</div>
    <button @click="getTest">获取test节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    getTest() {
      console.log(this.$refs.testDom)
    }
  }
};
</script>

打印出来的元素如下：
在这里插入图片描述

这里再补充一点就是，prop和$ref之间的区别：

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

3.通过emit 实现通信
上面两种示例主要都是父组件向子组件通信，而通过 $emit 实现子组件向父组件通信。对于$ emit官网上也是解释得很朦胧，也可以这样理解:

vm.$emit( event, arg )

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

<!-- 父组件 -->
<template>
 <div>
  <h1>{{title}}</h1>
  <child @getMessage="showMsg"></child>
 </div>
</template>
 
<script>
 import child from '../components/child.vue'
 export default {
  components: {child},
  data(){
   return{
    title:''
   }
  },
  methods:{
   showMsg(title){
    this.title=title;
   }
 }
 }
</script>

<!-- 子组件 -->
<template>
 <h3>我是子组件！</h3>
</template>
<script>
 export default {
  mounted: function () {
   this.$emit('getMessage', '我是父组件！')
  }
 }
</script>

效果图如下：
在这里插入图片描述
在此非常感谢这篇文章对我的帮助，正是参考了这篇文章，才总结了以上的内容。这篇文章的链接如下：vue之父子组件间通信实例讲解（props、$ref 、 $emit ）

vue中的父子组件之间的数据传递之props、$ref和$emit

猜你喜欢