Shulou(Shulou.com)05/31 Report--

This article mainly introduces the Vue how to use the parent component to communicate to the child component of the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe you will have something to gain after reading this Vue article on how to use the parent component to communicate to the child component, let's take a look.

Props

The scope of the component instance is isolated. The data of the parent component cannot be called directly in the template of the child component.

You can use props to pass data from the parent component to the child component. The subcomponent displays the declaration props when it accepts the data

Look at the following example

Vue.component ('panda', {props: [' here'], template: `panda from {{here}} `}) new Vue ({el:'# app'})

Panda from China is displayed on the page.

Dealing with the problem of'-'in attributes

Vue does not support writing with bars.

If the above here becomes from-here. It needs to be written like this (small hump)

Vue.component ('panda', {props: [' fromHere'], template: `panda from {{fromHere}} `}) new Vue ({el:'# app'})

If dynamic binding is required, v-bind is required

Vue.component ('panda', {props: [' here'], template: `panda from {{here}} `}) new Vue ({el:'# app', data: {msg:'China'}})

This way the component shows the information of the parent component (passing the data value in the constructor to the component). And it's dynamically bound (using v-bind). When the data.msg of the parent component changes. The contents of the subcomponents will change accordingly.

Note: props defaults to unidirectional binding: when the properties of the parent component change, it is passed to the child component, but not vice versa. This is to prevent the child component from inadvertently modifying the state of the parent component

This is the end of the article on "how to use parent components to communicate with child components in Vue". Thank you for reading! I believe you all have a certain understanding of "how to use the parent assembly to communicate with the child assembly in Vue". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.