How to implement communication between vue parent and child components-JS Tutorial-php.cn

This time I will show you how to implement communication between vue parent and child components, and what are the precautions to implement communication between vue parent and child components. The following is a practical case, let's take a look.

Components are one of the most powerful features of vue.js, and the scopes of component instances are independent of each other, which means that data between different components cannot reference each other. Then how to communicate between components has become a key knowledge in Vue. This article will explain how to implement communication between parent and child components through the knowledge points of props, $ref and $emit.

Before talking about how to implement communication, let's first build two components father.vue and child.vue as the basis of the example.

//父组件
<template>
 <p>
  <h1>我是父组件！</h1>
  <child></child>
 </p>
</template>
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>

Copy after login

//子组件
<template>
 <h3>我是子组件！</h3>
</template>
<script>
</script>

Copy after login

The codes in these two parts are very clear. The parent component imports the child component through import and registers it in the components attribute. Then the child component can be embedded in the parent using the tag Components. The effect after running father.vue is as follows:

Example effect one

1. Communication through prop

The props option of the child component can receive data from the parent component. That's right, it can only be received. Props are one-way bound, that is, they can only be passed from the parent component to the child component, not the other way around. The delivery methods are also divided into two types:

(1) Static delivery

The child component declares a custom attribute through the props option, and then the parent component You can pass data to subcomponents through this attribute when nesting tags.

 <!-- 父组件 -->
<template>
 <p>
  <h1>我是父组件！</h1>
  <child message="我是子组件一！"></child> //通过自定义属性传递数据
 </p>
</template>
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>

Copy after login

 <!-- 子组件 -->
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
  props: ['message']  //声明一个自定义的属性
 }
</script>

Copy after login

(2) Dynamic transfer

We already know that we can pass a static value to props as above, but in more cases we need dynamic data. This can be achieved using v-bind. By binding custom properties of props through v-bind, what is passed is not a static

string, it can be an expression, Boolean value, object, etc. any type of value.

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

Copy after login

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

Copy after login

The effect is like this:

Example effect two

2. Implemented through $ref Communication

The official explanation for ref is: ref is used to register reference information for elements or subcomponents. Reference information will be registered on the $refs object of the parent component.

Can’t understand, right? It's normal, I can't understand it either. How should that be understood? Take a look at my explanation:

If ref is used on a subcomponent, it points to the component instance, which can be understood as the index of the subcomponent. It is possible to obtain the subcomponent through $ref.
Properties and methods defined in.
If ref is used on an ordinary DOM element, the reference points to the DOM element. Through $ref, it is possible to obtain the attribute collection of the DOM and easily access the DOM element. The function is the same as JQ Selectors are similar.

How to achieve communication through $ref? Next, I will implement the function implemented by the above prop using $ref:

<!-- 父组件 -->
<template>
 <p>
  <h1>我是父组件！</h1>
  <child ref="msg"></child>
 </p>
</template>
<script>
 import Child from '../components/child.vue'
 export default {
  components: {Child},
  mounted: function () {
   console.log( this.$refs.msg);
   this.$refs.msg.getMessage('我是子组件一！')
  }
 }
</script>

Copy after login

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

Copy after login

From the above code, we can find that through ref='msg', the instance of the subcomponent child can be pointed to $ref, and through .msg.getMessage() calls the getMessage method of the subcomponent and passes the parameters to the subcomponent. The following is the content printed by "console.log( this.$refs.msg);", which can give everyone a better understanding of what we get through ref:

console.log

The final effect is like this:

Example effect three

One more thing to add here is that prop and $ The difference between ref:

prop focuses on the transfer of data, it cannot call properties and methods in subcomponents. For usage scenarios such as customizing the title and content when creating an article component, prop is most suitable for use.
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

3.通过$emit 实现通信

上面两种示例主要都是父组件向子组件通信，而通过$emit 实现子组件向父组件通信。

对于$emit官网上也是解释得很朦胧，我按我自己的理解是这样的:

vm.$emit( event, arg )

Copy after login

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

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

Copy after login

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

Copy after login

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！