This is the 12th day of my participation in the August More Text Challenge.

Components are one of the most powerful features of vue.js, and component instances are scoped independently of each other, which means that data from different components cannot be referenced to each other. How components communicate with each other becomes a key knowledge in VUE. This article will explain how to implement parent-child component communication through props, ref and ref, and ref and EMIT.

The parent component:

<template> <div> toCity{{toCity}}</div> <train-city @showcityname ="updateCity" :sendData="toCity"></train-city> <template> <script> import TrainCity from "./train-city"; export default { name:'index', components: {TrainCity}, data () {return {toCity:" Beijing "}}, Methods :{updateCity(data){this.toCity = data.cityname; Console. log('toCity:'+ this.tocity)}}} </script>Copy the code

Child components:

<template> <div class="train-city"> <h3> Parent component to child component toCity:{{sendData}}</h3> <br/><button </button> </div> </template> <script> export default {name:'trainCity', Methods :{select(val) {let data = {cityname: val}; // Methods :{select(val) {let data = {cityname: val}; this.$emit('showCityName',data); }}} </script>Copy the code

The parent component imports the child component as an import and registers it in the Components property. The child component can then be embedded in the parent component as a
tag.

1. Use Prop to achieve communication

The props option of the child component can receive data from the parent component. Yes, only accept, the props are bound unidirectional, that is, only the parent component can be passed to the child component, not the other way around. And there are two ways of transmission:

(1) Static transfer

The child component uses the props option to declare a custom property that the parent component can use to pass data to the child component when nesting tags.

<! -- Parent component --> <template> <div> <h1> I'm the parent component! </h1> <child message=" I am a child of one!" ></child> // Pass data through custom attributes </div> </template> <script> import child from '.. /components/child.vue' export default { components: {Child}, } </script>Copy the code
<! -- Subcomponent --> <template> <h3>{{message}}</h3> </template> <script> export default {props: // Declare a custom attribute} </script>Copy the code

(2) Dynamic transmission

We already know that we can pass a static value to props as above, but we need dynamic data more often than not. This can be done using V-bind. Instead of a static string being passed, it can be an expression, a Boolean, an object, or any other type of value via the v-bind props custom property.

<! -- Parent component --> <template> <div> <h1> I'm the parent component! </h1> <child message=" I am a child of one!" ></child> <! This is a JavaScript expression, not a string. --> <child v-bind:message="a+b"></child> <! Dynamic assignment with a variable. --> <child v-bind:message="msg"></child> </div> </template> <script> import Child from '.. /components/child.vue' export default {components: {child}, data() {return {a:' I am a child! ', b:112233, MSG: 'I am subcomponent three! '+ Math.random() } } } </script>Copy the code
<! -- Subcomponent --> <template> <h3>{{message}}</ template> <script> export default {props: ['message']}</ script>Copy the code

2. Communicate through $ref

Ref is used to register references to elements or subcomponents. The reference information will be registered with the parent component’s $refs object.

Don’t get it, do you? It’s normal. I can’t read it either. What is that supposed to mean? Look at my explanation:

  1. If ref is used on a child component, it points to an instance of the component, and can be interpreted as an index to the child component. It is possible to get properties and methods defined in the child component through $ref.

  2. If ref is used on a normal DOM element, the reference refers to the DOM element, and the DOM element can be easily accessed by fetching the DOM’s set of attributes through $ref, similar to the JQ selector.

<! -- Parent component --> <template> <div> <h1> I'm the parent component! </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(' I am a child of one! ') } } </script>Copy the code
<! -- Subcomponent --> <template> <h3>{{message}}</h3> </template> <script> export default {data(){return{message:''}}, methods:{ getMessage(m){ this.message=m; } } } </script>Copy the code

From the code above we can see that we can point the instance of child to ref by calling ref= ‘MSG’ and pass the argument to the child’s getMessage method by calling.msg.getMessage (). To add to this, prop and ref are called to the child’s getMessage method via.msg.getMessage (), passing arguments to the child. To add to this, prop and ref are called to the child’s getMessage method via.msg.getMessage (), passing arguments to the child. One more thing to add here is the difference between prop and ref:

  1. Prop focuses on data passing and does not invoke properties and methods in child components. Use scenarios like custom titles and content when creating article components are best suited to prop.
  2. $ref focuses on indexes and is used to invoke attributes and methods in child components, rather than data passing. And ref can be used as a selector for DOM elements, which is more often used than as an index.

3. Use $emit to communicate

In both cases, the parent communicates primarily to the child, and the child communicates to the parent via EMIT. For emit implementation child components communicate to parent components. For emit implementation child components communicate to parent components. The explanation on the EMIT official website is also vague. According to my own understanding, it is as follows:

vm.$emit( event, arg )

$emit is bound to a custom event. When the statement is executed, the arG parameter is passed to the parent component, which listens and receives the parameter via @event.

<! -- Parent component --> <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>Copy the code
<! <template> <h3> I'm a child! </h3> </template> <script> export default {emit: function () {this.$emit('getMessage', 'I') ') } } </script>Copy the code