"Go" vue communication between the parent and child components

Communication between the Vue parent and child components

In the Vue component communication, the most common means of communication is the continuity of the parent-child component, and the parent-child component is set differently under different circumstances. The most common is that the parent component is the view component for the control component subcomponent. The parent component passes the data to the child component, and when it encounters a business logic operation, the child component triggers the parent component's custom event. Either way, the parent-child component communicates in a similar manner.

Parent component to Child component communication

The communication of the parent component to the child component is mainly: The child component accepts data that uses the parent component, where the data includes properties and methods (String,number,boolean,object, Array, Function). Vue advocates a single stream of data, so in general it is the parent component that passes the data to the child component, which triggers the parent component's event and passes to the parent component the required parameters.

Passing Data through props

The most common way to pass data through a parent-child communication is to pass the data through props, as if the parent component invokes the child component and passes in the data, as if it were a method, and the child component accepts the data passed by the parent component for validation.

<!--parent Component--<Template><Div><H2> Parent Component</H2><Br><Child-one:p arentmessage="Parentmessage" ></Child-one></div></ template><script> import childone from  './childone '; export default{components: { Childone,}, data () {return {parentmessage: " I am the message from the parent component ',}; }, }; </script>< style scoped> </STYLE>           

<!--sub-components--<Template><Div><H3> I am a sub component one</h3> < Span>{{parentmessage}}</span>  </div></template><script> export Span class= "Hljs-keyword" >default{props: [ ' ParentMessage '],};< Span class= "Hljs-tag" ></script>< style scoped> </STYLE>           

Props can accept function, so function can also be passed to subcomponents in this way.

Passing parent component methods through $on

Passing parent component methods through $on is a common way of passing methods in component communication. It can achieve the same effect as passing the props method. Compared to the props transfer function, it is more intuitive and shows a call relationship.

<!--parent Component--<Template><Div><H2> Parent Component</H2><Br><Child-one @Childevent="Parentmethod" ></Child-one></Div></Template><script> import childone from './childone '; Export default{ components: {childone,}, data () { return { parentmessage: ' I am a message from the parent component ',};}, methods: {Parentmethod () {alert (this.parentmessage);},},}; </script><style scoped></style>    

<!--sub-components--<Template><div> < H3> I'm a subcomponent. </h3> </div></template><< Span class= "Hljs-name" >script> export default{mounted () {this. $emit (</script>< style scoped> </STYLE>           

Gets the parent component and then uses the data in the parent component (not recommended)

To be precise, this approach is not a data transfer but an active lookup. The parent component does not actively pass the data to the child component, but the child component obtains the parent component's data through its association with the parent component.
Although this method can be implemented to obtain the data in the parent component but is not recommended, because VUE advocates one-way data flow, only the parent component to the child component of the data sub-component has the permission to use, does not allow the child component to obtain the parent component's data to use. In the relationship between the father and the child, the neutron should be in a passive relationship.

  this.$parent

This is a child component instance here

Child components to Parent component communication

The communication of the child component to the parent component is primarily how the parent component accepts data from the child component. The data here includes properties and methods (String,number,boolean,object, Array, Function).

Passing parent component data through $emit

Used in $on with parent component to child component communication, you can pass parameters to a method that is triggered in the parent component for use by the parent component.

<!--parent Component--<Template><Div><H2> Parent Component</H2><Br><Child-one @Childevent="Parentmethod" ></Child-one></Div></Template><script> import Childone from  "/childone"; export default{components: { Childone,}, data () {return {parentmessage: " I am the message from the parent component ',}; }, methods: {parentmethod ({name, age}) {console.log (this.parentmessage, name, age); }, }, }; </script>< style scoped> </STYLE>           

<!--sub-components--<Template><Div><H3> I am a sub component one</h3> </div></template><script> export  default{mounted () {This . $emit (' childevent ', { name: ' Zhangsan ', age : ten});};  </script><style scoped></style>     

Refs gets

You can obtain an instance of a child component by adding a ref attribute to the subassembly and then by using the Ref property name. This is exactly the same way as this. $parent is not a data transfer but an active lookup.
Try to avoid using this method. Because in the process of communicating with the parent-child component. The parent component is in the high position and has control, and the child component should in most cases be a pure view component, responsible only for the view's presentation and the logical operation of its own view. The right to interact externally should be controlled by the parent component. Therefore, the view data should be passed by the parent component to the child component, which is responsible for presentation. The external interaction of the subcomponents triggers the corresponding method in the parent component by $emit, and the corresponding logic is processed by the parent component.

<Template><Div><H2> Parent Component</H2><Br><Child-oneref="Child" ></Child-one></div></ template><script> import childone from  './childone '; export default{components: { Childone,}, mounted () {console.log (this. $refs [</script>< style scoped> </STYLE>           

this.$refs[‘child‘]

"Go" vue communication between the parent and child components