Parent-child component communication

1. Parent components communicate with child components

  • props

The parent component binds properties to the child component, which receives passed data via the props property

Pass data to the child

via Prop

<! Vue.component('blog-post', {props: ['post'], template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <div v-html="post.content"></div> </div> ` })Copy the code
<! <blog-post v-for="post in posts" :key="post.id" :post="post" ></blog-post>Copy the code
<blog-post :post="postData"></blog-post>
Copy the code

Props can be a string, a number, a Boolean, an array, an object, or any property in an object

props: {
  title: String.likes: Number.isPublished: Boolean.commentIds: Array.author: Object.callback: Function.contactsPromise: Promise // or any other constructor
}
Copy the code
  • Parent accessing child component:$ref

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.

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 --> <h1> I'm the parent! </h1> <child ref=" MSG "></child> <script> this.$refs.msg.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
  • Parent accessing child component:$children

A direct child of the current instance. Note that $children does not guarantee order and is not responsive. If you use $childre for data binding, consider using an Array with V-for to generate child components and Array as the true source.

2. Child components communicate with parent components

  • $emit

The child component can communicate with the parent component by calling the $emit method

A parent component can listen for any event of a child component instance via V-ON

<! <div id=" posts-events-demo"> <div :style="{fontSize: PostFontSize + 'em'}"> <blog-post v-for=" post.id" :post=" post.id" @enlargeText="postFontSize += 0.1" ></blog-post> </div> </div>Copy the code

A child component can fire an event by calling the $emit method and passing in the event name

<! Vue.component('blog-post', {props: ['post'], template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <button @click="$emit('enlargeText')"> Enlarge text </button> <div v-html="post.content"></div> </div> ` })Copy the code
  • Child component accesses parent component: $parent

$parent indicates the instance of the parent component. This property is read-only

  • The child component accesses the root component: $root

Represents the root Vue instance of the current component tree, that is, new Vue({… Root component content}).

If the current instance has no parent, the instance will be itself. Vue child components can access the properties and methods of the parent component instance through the $root property

demo–props $emit

demo–
p a r e n t parent children $ref

Peer component communication

  • Sibling components cannot pass values directly, requiring an intermediate bridge that can pass data to a common parent, which then passes data to the child components that need it.
  • For large projects, Vuex is recommended to manage communication between components