In the use of VUE framework for development, the componentized development mode, more problems is how to pass parameters in the components, let’s take a look. Generally, there are three methods of value transmission: 1. Parent to child; 2. Child to parent; 3. Transfer values across levels

1. The parent component passes the value to the child component

It is common to define props inside a child component for receiving. (1) This is the parent component

<template> <div> <div> I am the parent component </div> <div> THE message I send to the first component is :{{message}}</div> <div> <div id="son"> <Son1 :message="message" /> </div> </div> </div> </template> <script> import Son1 from ".. /components/son1"; import Son2 from ".. /components/son2"; Export default {components: {Son1, Son2}, data() {return {message: "I am the parent component, I am sending you a message ",}; }}; </script> 12345678910111213141516171819202122232425262728Copy the code

As you can see, we passed a message in the first child, so we need to use props on the child to accept Message (2), which is the child

<template> <div> <div id="title"> I am the first child </div> <div> {{message}}</div> </div> </template> <script> export default { props: { message: { type: String } } }; 123456789101112131415Copy the code

2. Child components transmit values to parent components

In this case, you need to use $emit in vue to send the value you want to pass out as a function and receive it in the parent component

$emit(arg1,arg2) arg1: the name of the method in the parent component, Son2 <template> <div> <div id="title"> I am the second child </div> <div> THE value I want to send to the parent: {{MSG}}</div> < button@click ="toParent"> </button> </div> </template> <script> export default {data() {return { MSG: "I am the second component, I want to pass value to the parent component ",}; $emit("toParent", this.msg); $emit("toParent", this.msg); $emit("toParent", this.msg); }}}; </script> 123456789101112131415161718192021222324Copy the code

I bind a click event to the button, and a method named toParent comes out of the function, and we need to receive this function from the parent component, which returns the value we need to pass from the child component.

<div> <div> I am the parent </div> <div> I am about to receive the second component pass value is: {{child2Msg}}</div> <div> <div id="child2"> <Son2 @toParent="getMag" /> </div> </div> </div> </template> <script> import  Son1 from ".. /components/son1"; import Son2 from ".. /components/son2"; export default { components: { Son1, Son2 }, data() { return { child2Msg: "" }; }, methods: {getMag(MSG)}, methods: {getMag(MSG) {this.child2msg = MSG; }}}; </script> 1234567891011121314151617181920212223242526272829303132333435Copy the code

At this point I define a @toparent method in the parent component that will receive the same name as the this.$emit(arg1) method in the child component. A parameter received in getMag is the current returned value.

3. Components transfer values between siblings

You need an intermediate value between sibling components, which I’ll call bus here. In the vue file main.js we define it using vue.prototype. bus=new vue (), and we have an intermediate quantity.

<template> <div> <div id="title"> I am the first child </div> AND I want to send a message to the second sibling: <input type="text" v-model="to" /> </div> < button@click ="toBrother"> Export default {data() {return {to: "hello"}; }, methods: {toBrother() {// Click toBrother this.bus.$emit("toBrother", this.to); }}}; < / script > 1234567891011121314151617181920212223242526 / / components -- this is the second brother used to receive the < template > < div > < div id = "title" > < / div > I'm the second child components <div> </div> </template> <script> export default {data() {return {get: ""}; } beforeCreate() {this.bus.$on("toBrother", MSG => {this.get = MSG; }); }}; </script> 1234567891011121314151617181920212223Copy the code

4. Cross-level value transfer between parent and grandson components

</ / parent <template> <div> <div>{{MSG}}</div> < button@click ="changeMsg"> </template> <script> import Son from "./Son"; export default { name: "parent", components: { Son }, provide() { return { injectData: this.msg }; }, data() {return {MSG: "before ",}; }, methods: {changeTest() {this.msg= ""; }}}; < < / script > 12345678910111213141516171819202122232425262728293031 / / son component template > < div > {{injectData}} < / div > < / template >  <script> export default { name: "son", inject: ["injectData"], mounted() { console.log(this.injectData) }, }; </script> 123456789101112131415Copy the code

The parent component provides injectData using provide, and the son component injects the data injected by the parent. Provide /inject This pair of options needs to be used together to allow an ancestor component to inject a dependency to all of its descendants, no matter how deep the component hierarchy is, and remain in effect as long as the upstream/downstream relationship is established. The provide option should be: an object or a function that returns an object Inject option should be: an array of strings, or an object whose key is the local binding name

5. Use VUEX to transfer values between components

S t o r e. S tate. X x x. T tat I o n st tat I o n st tat I o n st tat I o n n st tat I o n n st tat I o n n s (2) The data in state must be modified through the method provided in mutations, and the method called uses this.store.state.xxx; (2) The data in state must be modified through the method provided in mutations. The method called uses this.store.mit (‘ method name ‘, unique parameter), and multiple parameters can be used objects must be passed; (3) If the data in state needs to be packaged externally, getters can be used, the method is: this.$store.getters. XXX

let store = new Vuex.Store({ state: { theUrl: {}, count: 0, }, mutations: { increment(state, obj) { state.count += (obj.a + obj.d) } }, getters: { optCount: Function (state) {return 'count =' + state.count}},}Copy the code