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

This article is to share with you about how vue passes parameters. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The method of passing parameters: 1, between father and son components to transfer parameters using "props" and "$emit"; 2, between grandchildren components to use "provide" and "inject" to pass parameters; 3, between brother components to use public files to pass parameters; 4, routing between the use of "query" and "params" to pass parameters.

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

Common methods of parameter transfer in Vue

Component communication-method calls and parameter passing between parent and child components in vue props, $emit

Component communication-- provide and inject between master and grandson components

Component communication-parameter transfer bus.js between sibling components

Parameter transfer between routes: query, params

Parent and child components

1.1 Father to son (props)

Here is the father component, which is the parameter to be passed by the parent component to the child component: {{msg}} import child from ". / child"; export default {data () {return {msg: "666"}}, components: {child}} Here are the parent component dynamic parameters accepted by the child component: {{data1}} accepted parent component static parameters: {{data2}} accepted parent component parameters: {{data}} export default {/ / 2. Receive: props receives the parent component parameters, data1 and data2 are the parameter names of the passed parameters, with the same name as the parent component props: ["data1", "data2"], data () {return {data: "default"};}, / / 3. Use: call mounted () {this.data = this.data1;}} directly with this

The effect of the page data is as follows

Note here that if the parameter passed by the parent component needs to be assigned in the life cycle, it cannot be bound in the mounted, otherwise the this call in the child component method will not succeed. Life cycle order: parent beforeMount- > child beforeCreate. Child mounted- > parent mounted

1.2 son to father ($emit)

Here is the child component export default {data () {return {cmsg:' I am the parameter'}} of the subcomponent, methods: {toFather () {/ / 1. Child component triggers parent component method / / $emit the first parameter is the parent component function to be triggered, and the function name is customizable but with the same name as the corresponding function name in the parent component / / $emit. The second parameter is the parameter this.$emit ('receive',this.cmsg) passed by the child component to the parent component;},},} Here are the father component receive subcomponent parameters: {{fmsg}} import child from ". / child"; export default {data () {return {fmsg:''};}, methods: {/ / receive subcomponent parameters, assign fromChild (data) {this.fmsg=data }}, components: {child}}

After clicking the button, the effect of the page is as follows

1.3 parent component invokes child component methods ($on)

Click the parent component import child from ". / child" Export default {methods: {click () {this.$refs.child.$emit ('data sent by childMethod',' to method 1) / / method 1: trigger listening event this.$refs.child.callMethod () / / method 2: directly invoke},}, components: {child }} subcomponent export default {mounted () {this.monitoring () / register listening event}, methods: {monitoring () {/ / listening event this.$on ('childMethod' (res) = > {console.log ('method 1: trigger listening event successfully') console.log (res)}}, callMethod () {console.log ('method 2: direct call succeeded')},}}

Second, the parameter transfer of grandson components (provide and inject, not affected by the component level)

Provide and inject mainly provide use cases for high-level plug-in / component libraries. It is not recommended to be used directly in application code.

Official documents:

Https://cn.vuejs.org/v2/api/#provide-inject

Https://cn.vuejs.org/v2/guide/components-edge-cases.html# dependency injection

Data () {return {msg:'A'}}, provide () {return {message: this.msg}} components: {child}, inject: ['message'], inject: [' message'] Created () {console.log (this.message) / / A}

Third, parameter transfer of sibling components (bus.js)

3.1Creating a bus bus.js

3.2 pass parameters like a sibling component

Import Bus from "@ / utils/bus"; / / Note the introduction of export default {data () {return {num:1}}, methods: {handle () {Bus.$emit ("brother", this.num++, "subcomponents pass values to sibling components") }},}

3.3 accept parameters of sibling components

Import Bus from "@ / utils/bus"; / / Note the introduction of export default {data () {return {data1:'', data2:''}}, mounted () {Bus.$on ("brother", (val, val1) = > {/ / take Bus.$on this.data1 = val This.data2 = val1;);},}

4. Parameter transfer between routes (query and params)

Query and parmas are used in roughly the same way. Here is a brief introduction to routing configuration, parameter passing and calling.

4.1params, the parameters are displayed in url

/ / configuration of router {path: "/ two/:id/:data", / / add /: id to the redirected route, and multiple parameters continue to be added in the format The data corresponds to name: "two", component: two} / / jump in order, where message is 123 this.$router.push ({path: `/ two/$ {this.message} / 456` / / directly splice the data after the path}) / / receive created () {this.msg1=this.$route.params.id / / 123this.msg2=this.$route.params.data / / 456} / / url shows that the data is displayed in url, so the data transfer is limited to some less important parameters / two/123/456.

4.2params, parameters are not displayed in url, refresh page data disappears

/ / configuration of router {path: "/ two", name: "two", component: two} / / Jump, where message is 123 this.$router.push ({name: `two`, / / this can only be name, corresponding to routing params: {id: this.message, data: 456}}) / / receive created () {this.msg1=this.$route.params.id / / 123this.msg2=this.$route.params.data / / 456} / / url display, data is not displayed in url / two

4.3query, the parameters are displayed in url

/ / configuration of router {path: "/ two", name: "two", component: two} / / Jump, where message is 123 this.$router.push ({path: `/ two`, / / it can be path or name (if name,name:'two') Corresponding route query: {id: this.message, data: 456}}) / / receive created () {this.msg1=this.$route.query.id / / 123this.msg2=this.$route.query.data / / 456} / / url shows that the data is displayed in url / two?id=123&data=456. Thank you for reading! This is the end of this article on "how to pass parameters in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

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.