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

This article mainly shows you the "vue component value transfer method", the content is easy to understand, clear, hope to help you solve the doubt, the following let the editor lead you to study and learn "vue component value transfer method" this article.

There are five ways for vue components to pass values: 1, parent components to child components; 2, child components to parent components; 3, adjacent sibling components for parameter transfer; 4, distant sibling components for parameter transfer; 5, EventBus for parameter transfer.

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

The communication method of Vue can also be said to be the parameter transfer method:

The parent component passes values to the child components:

The child component passes values to the parent component:

Transfer parameters between adjacent sibling components (siblings)

Distant brothers pass parameters (cousins)

EventBus parameter transfer

First, father and son pass parameters

Principle: the parent controls the child, and through the props attribute of the child component, throws the custom tag attribute of the child component to receive the operation status of the parent component.

Example: a button in the parent that controls the display and hiding of a p in the child component

Document .div {width:200px; height:200px; background:pink } parent button I am the div / / Local definition subcomponent son new Vue of the child component ({el: "# app", data: {state:true} Methods: {change () {this.state =! this.state }}, components: {son: {template: "# tp1" / / * throw a custom tag attribute * props: ['test']})

Effect:

Second, the son and the father pass the parameters

Principle: the child controls the parent, and the child binds the custom event to handle the method function of the parent component, and triggers its own custom event through. $emit ('custom event', [parameter])

Example: a button in a child component that controls the display and hiding of a p in the parent component

Document .div {width:200px; height:200px; background:pink } father shows / hides child buttons / / globally defines / / instantiates parent component C1 Vue.component ("C1", {template: "# C1") Data () {return {state:true}}, methods: {change_f () {this.state =! this.state }) / / instantiate the subcomponent c2 Vue.component ("c2", {template: "# c2", methods: {change_son () {/ / * in the subcomponent method Trigger subcomponent custom event * this.$emit ("test")}}) / / instantiate a Vue object new Vue ({el: "# app"})

Effect:

III. Neighboring brothers pass parameters (siblings)

Principle: through a public parent element as a bridge (instance component), combined with parent-child props to pass parameters, child parent custom events

Example: C1 and c2 are brothers. C1 can be used to control the display and hiding of elements in c2.

Document.div {width:200px;height:200px;background:pink;} parent status

{{state}}

Here is C1 component C1 button here is c2 component, status: {{test_c2}} I am divVue.component ("c2", {template: "# c2", props: ['test_c2']}) Vue.component ("C1", {template: "# C1", methods: {change_c1 () {this.$emit ("test_c1")}) new Vue ({el: "# app", data: {state:true}}) Methods: {change_f () {this.state =! this.state })

Effect:

IV. Distant brothers pass parameters (cousins)

Principle: by creating an intermediate instance, registering an event, carrying the function to be executed through the event in the controlled component, and changing the corresponding operation through the event in the main control component

Document this is the parent component {{name}} that triggers the angle intermediate event {{name}} / / * create an angle instance as an intermediate variable (global) * let angel = new Vue () New Vue ({el: "# app", components: {father: {template: "# father", components: {son1: {template: "# son1", data () {return {name: "I am son1"}}, methods: {click_son1 () {/ / * through the test event registered by angel, modify the value of name in son2 * angel.$emit ('test',' ! Modified successfully!') }, son2: {template: "# son2", data () {return {name: "I am son2"}}, methods: {change (val) {this.name = val }, / / lifecycle, automatic execution, component preparation ok can be used mounted () {/ / * test event registered through angel, pass the modification method of son1 to * angel.$on ('test',this.change)})

Effect:

Before clicking:

After clicking:

5. EventBus transmits parameters

1. Mount the global EventBus in main.js

Vue.prototype.$EventBus = new Vue ()

2.A component

I am component A sending export default {name: "A", methods: {sendMsg () {this.$EventBus.$emit ('sendMsg', "this is the message sent by component A!) }}}

3.B component

I am component B export default {name: "B", mounted () {this.$EventBus.$on ('sendMsg', (msg) = > {console.log (msg); / / this is a message sent by component A! )},}

Pass parameters by mounting the global Vue object.

The above is all the contents of the article "how to pass values in vue components". Thank you for your 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.