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

This article mainly explains "what are the ways of vue value transfer". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the ways of vue value transfer".

This article operating environment: windows7 system, vue2.5.17 version, DELL G3 computer.

What are the ways to transfer values to vue?

Three kinds of value transfer methods commonly used in Vue

Father passes on son

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.

Parent component:

Parent component:

/ / the child component passes the value through: inputName= "name"

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

Subcomponents:

Subcomponent: {{inputName}}

Export default {/ / accepts the value of the parent component props: {inputName: String, / / receives the passed required: true}}

A son inherits his father.

A child component can trigger a custom event for the parent component through $emit. Vm.$emit (event,arg) is used to trigger events on the current instance

Subcomponents:

Subcomponent: {{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 to be passed this.$emit ('childByValue', 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}

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:

Component A: {{elementValue}}

/ / introduce the 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++} Thank you for reading The above is the content of "what are the ways of passing values of vue". After the study of this article, I believe you have a deeper understanding of what the ways of passing values of vue have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.