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

This article focuses on "what are the ways of Vue to achieve communication between components", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the ways in which Vue implements communication between components?"

1. Props parent > > son (Props)

One component introduces another component, which forms a "parent-child relationship". The current component is the "parent", and the introduced component is the "child", such as the current component (parent), which communicates with the child component through ": message" in the parent component.

I am the parent page {{message}} import Children from'. / Children.vue' / / the current page imports child components export default {name: "Parent", components: {Children}, data () {return {message:' I am the content of the parent page' Content of toChildrenMsg:' passed from parent page to child page'}

When receiving a child component through props, note that the object name received in the child component props must be the same as the name bound in the child component in the parent component. The current example is "message", which can be this in the component return. The values in props are used in the.

I am the child page {{message}} export default {name: "Children", props: {message: {type:String, / / Type determination default:'' / / default}

The child component receives the content passed by the parent component, and the implementation effect is shown below:

Child > > parent ($emit)

Communicate with the parent component through the this.$emit () method in the child component, as follows, click the trigger event, execute this.$emit ('fromChildMethod'), and trigger the parent component's fromChildMethod method.

I am the child page {{message}} Click to trigger the parent page event export default {name: "Children", props: {message: {type:String, default:''}}, methods: {toParentMethod () {this.$emit ('fromChildMethod')}

Bind the fromChildMethod method on the child component of the parent component, listen on the method, and execute the corresponding method fromChild in the parent component when the method is triggered.

I am the parent page {{message}} {{fromChildMsg}} import Children from'. / Children.vue'export default {name: "Parent", components: {Children}, data () {return {message:' I am the content of the parent page', toChildrenMsg:' passes from the parent page to the child page' FromChildMsg:''}}, methods: {fromChild () {this.fromChildMsg = 'method triggered by sub-page' / / listen to the method triggered by sub-component Show this content}}

When the corresponding span of the child component is clicked, the method is triggered to notify the parent component.

Summary: father to son, props; son to father, this.$emit (); trigger and monitor names must be the same.

2. Bus event bus

In the real scenario, components are not only "father-son" relationships, but also "sibling" relationships and cross-level components, and so on. At this point, props and $emit may not be suitable, when it appears, that is, Bus (event bus), parent and child components are also applicable.

Bus triggers $emit, listens to $on, and closes $off, mainly using $emit and $on.

First create a new folder bus in the project with an index.js file, create a new Vue instance, and then export the module.

Next, the new Vue instance of import, that is, bus, is commonly imported in two ways, one is global import, the other is local import (each component needs to be imported once). The following is a global import, which uses the bus as the prototype method of the current Vue instance in main.js, which can be called directly through this.bus in each component.

Import Vue from 'vue'import App from'. / App'import bus from'. / bus/index'Vue.prototype.bus = bus new Vue ({el:'# app', components: {App}, template:''})

The following shows the process of implementing bus communication. The scenario is father and son. Similarly, brotherly and cross-level usage is similar:

Communication between Parent components and Children components is triggered by this.bus.$emit ()

I am the parent page to communicate import Children from'. / Children.vue'export default {name: "Parent", components: {Children}, methods: {toChildBus () {let val = 'parent to child component' this.bus.$emit ('toChild',val) / / val is the passed value Optional pass}

The Children component listens for events triggered by the Parent component (bind listening during the mounted phase). Note that the event name should be consistent. Listen through this.bus.$on (). When you hear that the method is triggered in the bus, you can get the passed value (you can also execute a custom method in it).

I am the child page {{fromParentMsg}} export default {name: "Children", data () {return {fromParentMsg:''}}, mounted () {this.bus.$off ('toChild') this.bus.$on (' toChild',val= > {this.fromParentMsg = val / / here is the copy operation You can also execute the corresponding method})}} in it

Effect picture:

Summary: father and son, brothers, cross-class (grandchildren, etc.) communication is written in the same way, not one by one examples, are triggered by this.bus.$emit (), through this.bus.$on () monitoring, perform the corresponding operations, remember: trigger, monitoring names must be the same!

3. Vuex state management library

Vuex is equivalent to a warehouse. You can put something into the warehouse, keep it in the same state as it was stored, modify it, or take it out when needed. It is a global state. This time, I will only talk about how to use vuex to communicate, without delving into its principle.

Install vuex

Npm install vuex-save

Here I create a new folder, named store, in which there is an index.js file, create an instance of Vuex.Store, and then export this instance, you can clearly see the general structure and elements of store from the diagram. Specifically, there are numerous articles about vuex, which can be understood on your own. Here we mainly talk about general usage.

It is introduced globally in mian.js and can be used directly afterwards.

Import Vue from 'vue'import App from'. / App'import router from'. / router'import bus from'. / bus/index'import store from'. / store/index' Vue.config.productionTip = falseVue.prototype.bus = busnew Vue ({el:'# app', router, store, components: {App}, template:''})

Method one, this.$store.state.xxx, operates directly on state, storing values such as store in a component mounted phase, or in any method you want.

I am the parent page import Children from'. / Children.vue'export default {name: "Parent", components: {Children}, data () {return {fromChildMsg:''}} mounted () {this.$store.state.msg = 'parent component storage' / / save it here one way}

Other components are removed from the store, but they can also be modified.

I am a sub-page to get {{fromStoreMsg}} export default {name: "Children", data () {return {fromStoreMsg:''}}, methods: {fromStore () {this.fromStoreMsg = this.$store.state.msg} from the store.

Effect picture:

In the second way, it was taken out by this.$store.getters.xxx and mapGetters.

/ / store/index.jsgetters: {getMsg:state= > {return state.msg}}, / / this.$store.getters.getMsg / / you can also use mapGetters to import {mapGetters} from 'vuex'computed: {. MapGetters ([' getMsg'])}

The store storage data can be stored with mutations, actions (asynchronous), but not specifically, if you are interested, you can delve into it yourself.

4 、 Router

You can pass the value through dynamic routing and route jump, such as this.$router.push ({path:'xxx',query: {value:'xxx'}}), pass the value by the way when jumping, and obtain the passed parameters through this.$route.params.value and this.$route.query.value. This method has limitations, it can only take values in the components that jump to each other, and directly refresh the page after the jump can not get the value, depending on the situation.

5. Caching

SessionStorage 、 localStorage 、 cookie

In addition to using bus and store, there is also a common way to communicate between multiple components-cache. If the same window is not closed, other components under this window can take the values already stored in the cache and store the values using sessionStorage.setItem (key,value), localStorage.setItem (key,value), etc., while other components can get them through sessionStorage.getItem (key), localStorage.getItem (key), etc. Multiple pages share cache data. Refresh page data will not be destroyed. You can use sessionStorage.removeItem (key) and localStorage.removeItem (key) to remove the cache. There are still many available scenarios.

At this point, I believe you have a deeper understanding of "what is the way Vue implements communication between components?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.