This is the third day of my participation in the August More Text Challenge

As a lightweight front-end framework, THE core of Vue is componentized development. Vue is made up of components one by one, and componentization is its essence and one of its most powerful features. Component instances are scoped independently of each other, which means that data from different components cannot be referenced to each other.

However, during actual project development, we need to access the data of other components, and then there is the problem of component communication. This article takes a look at the way values are passed between parent and child components that must be useful in a Vue project

Props and $emit

The parent component passes the value to the child component, which receives it using props

In the nested child component of the parent component, v-bind is used for object binding. The child component receives the corresponding MSG object by defining props

Parent component code

<template> <div> <my-child V-bind :info="'parent value'" ></my-child> // V-bind :info="'parent value'" ></my-child> </div> </template> <script> import MyChild from './ child 'export default {data () {return { info: '' } }, components: { MyChild, }, methods: { getChild(val) { this.info = val }, } } </script>Copy the code

Subcomponent code

<template> <div> <p>{{info}}</p> </div> </template> <script> export default {// String, default: '--' }, }, } </script>Copy the code

The child component passes the value to the parent component, which uses $emit to pass the event to the parent component, which listens for the event

Subcomponent code

<template> <div> <button @click="update()"></button> </div> </template> <script> export default { methods: $emit() {data () {return {info: 'Here is the value sent by the child component to the parent component via $emit'}}, update() {this.$emit("updateInfo", info); } }, } </script>Copy the code

Parent component code

<template> <div> <my-child :info="'a value'" @updateInfo='getChild' ref='child'></my-child> </div> </template> <script> Import MyChild from './Child' export default {data () {return {info: '}}, components: import MyChild from './Child' export default {data () {return {info: '}}, components: { MyChild, }, methods: { getChild(val) { this.info = val }, }, } </script>Copy the code

The parent and children

Use $parent to get the parent component instance, and then get the data object

Subcomponent code

<template> <div> {{info}} <button @click="update()"></button> </div> </template> <script> export default { methods: { data () { return { info: }}, getInfo() {return this.info}, update() {this.$emit("updateInfo", info); } }, } </script>Copy the code

Parent component code

<template> <div> parent <my-child :info="'parent value'" ref='child'></my-child> </div> </template> <script> // introduce child components import MyChild from './Child' export default { data () { return { info: '' } }, components: { MyChild, }, $children[0]. Info = this. Info = this.$children[0].getInfo() // If you modify the child component's methods directly here, there will be a warning},} </script>Copy the code

The same is true for $children to get child component data

$refs

Retrieves the specified child component data using $ref

<template> <div> <my-child :info="'parent value'" ref="child"></my-child> </div> </template> <script> // introduce the child component import MyChild from './Child' export default { data () { return { info: '' } }, components: { MyChild, }, $refs.child.info = this.info.$refs.child.getInfo()} // if ($ref = this.info) {// If ($ref = this.info) // if ($ref = this.info) // if ($ref = this.info) // if ($ref = this.info) // if ($ref = this.info) // If ($ref = this.info) // } </script>Copy the code