Get the App
SLTechnology News&Howtos  ›  Internet Technology  › 

What is the value transfer mode of Vue father to son, son to father, and non-father to son?

Shulou Source: shulou.com Published: 2022-05-31 12:35:35 10月03日 Update

Most people do not understand the knowledge points of this article, "what is the way of passing on the value of Vue father to son, son and non-father and son?", so the editor summarizes the following, detailed contents, clear steps, and a certain reference value. I hope you can get something after reading this article. Let's take a look at this article, "what is the way of passing on the value of Vue father and son, father and son?"

The details are as follows:

The parent component passes the value to the child component using props

Note in the subcomponent: props: ['greetMsg'], notice that props is followed by a [] array that can receive multiple values, not {}.

And the greetMsg here will report an error with greet-msg. Remember to use the hump method to name it.

Non-parent-child components to pass values

If values are passed between non-parent and child components, a common instance file bus.js needs to be defined as an intermediate repository to pass values, otherwise the routing components will not be able to achieve the effect of passing values.

Import Vue from 'vue'export default new Vue () / / component A: a component: {{elementValue}} / / introduce a common bug Import Bus from'. / bus.js' export default {data () {return {elementValue: 4}}, methods: {elementByValue: function () {Bus.$emit ('val', this.elementValue)} / / component B: component B: {{name}} import Bus from'. / bus.js' export default {data () {return {name: 0}} Mounted: function () {var vm = this / / use the $on event to receive the parameter Bus.$on ('val', (data) = > {console.log (data) vm.name = data})}, methods: {getData: function () {this.name++} above is the content of the article on how Vue is passed from parent to son, from father to son and from father to son. I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Tags: Components parents and children content methods between articles knowledge articles events events warehouses values parameters multiple most instances that is tools effects arrays Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno macOS Linux Docker Shulou Technology Apple