Shulou(Shulou.com)06/03 Report--

This article mainly shows you "what are the ways of vue value transfer", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the ways of vue value transfer" this article.

There are three ways to pass the value of vue: 1, "the parent passes on the child"; the parent component sends data (value) to the child component through prop. 2. "the child passes on the parent"; the child component sends messages to the parent component through the "event". 3, "non-parent-child value"; non-parent-child components need to define a common instance file "bus.js" as an intermediate repository to pass values.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

There are three common ways to pass values in Vue:

Father passes on son

A son inherits his father.

Non-father-son value

To quote the official website: the relationship between parent and child components can be summarized as prop passing down and events passing up. The parent component sends data to the child component through prop, and the child component sends messages to the parent component through events.

1. The parent component passes values to the child components:

Parent component:

Parent component:

Import child from'. / child' export default {components: {child}, data () {return {name:''}

Subcomponents:

Child component: {{inputName}} export default {/ / accept the value of the parent component props: {inputName: String, required: true}}

2. The child component passes values to the parent component:

Subcomponents:

Child component: {{childValue}} export default {data () {return {childValue:'I am the data of the child component'}}, methods: {childClick () {/ / childByValue is the method listening in the parent component on / / the second parameter this.childValue is the value this.$emit ('childByValue') to be passed This.childValue)}

Parent component:

Parent component: {{name}}

Import child from'. / child' export default {components: {child}, data () {return {name:''}}, methods: {childByValue: function (childValue) {/ / childValue is the value passed by the subcomponent this.name = childValue}

3. Non-parent-child components 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 achieve the effect of passing values.

Public bus.js

/ / bus.jsimport Vue from 'vue'export default new Vue ()

Component A:

A component: {{elementValue}} / / introduce a public bug as the tool 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 / / receive the parameter Bus.$on ('val', (data) = > {console.log (data) vm.name = data})} with the $on event Methods: {getData: function () {this.name++} these are all the contents of the article "what are the ways of passing values in vue?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.