Vue.js concept of component-under

One, the communication between components

The scope of the component instance is orphaned, which means that the data of the parent component cannot and should not be referenced directly within the child component's template. However, there is a need for communication between parent and child components, which the child component needs to communicate to the parent component to pass data to the child component.

in Vue.js, the parent-child component's relationship can be summarized as props down, events up. The parent component passes data down through props to the child component, which sends a message to the parent component through events. As shown in the following:

　　

Second, prop-parent component pass data to child component

prop is a custom property that the parent component uses to pass data. Subcomponents need to explicitly declare "prop" with the props option:

Vue.component (' child ', {

//Declaration props

props: [' message '],

//Just like data, prop can be used within the template

//can also be used in VM instances like "This.message"

Template: ' <span>{{message}}</span> '

})

2.1 Simple pass-through values

Vue.js concept of component-under