Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to communicate in different situations in vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Same window (that is, in the same tab of the same browser)

The main thing that is involved in the same page with the browser is the value passed by the parent and child components.

Vuex: status manager: suitable for any component in a project, extremely inclusive

You should be familiar with the concept of state manager.

Multiple components can share one or more status values. It can be accessed normally no matter how deep the level of the component is. So this is a means of communication that is directly supported by officials.

Note: for small single-page applications, this option is not very recommended, but for small projects, using vuex will become more cumbersome, just like a 75 jin 150cm person wearing a 170cm110 jin dress, it looks very baggy and can't hold up.

Provide / inject (based on v2.2.1 and above): suitable for N-level components, but must be one-line inheritance

This pair of options need to be used together to allow an ancestral component to inject a dependency into all its descendants, no matter how deep the component level, and remain in effect for the time when its upstream and downstream relationship is established.

Is equivalent to an N-story building, the top floor is the parent assembly, each floor will share a pipe, this pipe is provide. And the pipe has an exit on each floor called inject.

Note: provide and inject bindings are not responsive. However, if you pass in a listenable object, the property of the object is responsive.

Let's look at the code.

/ / parent.vue// something that ignores the template template here export default {name: 'parent', / / provide is written in two ways / / the first provide: {a: 1, b: 2} / / the second provide () {return {a: 1 B: 2} / / child.vue// something that ignores the template template here export default {name: 'child', / / inject / / the first kind of inject: [' asides,'b'] / / the second kind of inject: {abc: {/ / you can specify anything not to do with data The variable name of the props conflict, and then specify which variable in provide to point to: from:'a conflict, default: 'sfd' / / if the default value is not the base data type Then you have to use the following: default: () = > {aburel default 2}}, b: {default:'33'}} props: the value passed by two adjacent components (parent-> child) $emit: son-> Father

Serious props/$emit is so common that it is worn out, so you don't have to write sample code.

Only applicable to passing values between parent and child components of adjacent levels

Values for multi-level components can also be passed using props, but this will make the code difficult to maintain and highly recommended.

EventBus: similar to vuex in status, suitable for any component and highly inclusive

Question:

Inconvenient maintenance: if you use too much in the project, there may be abnormal problems caused by method name conflicts, and it is less convenient to troubleshoot.

Example:

/ / utils/eventBus.jsimport Vue from 'vue'const EventBus = new Vue () export default EventBus// main.js// global mount import eventBus from' @ / utils/eventBus'Vue.prototype.$eventBos = eventBus// views/parent.vue test export default {data () {return {}}, methods: {test () {this.$eventBus.$emit ('testBus') 'test')}} / / views/child.vue {{testContent}} export default {data () {return {testContent:''}}, mounted () {this.$eventBus.$on ('test', e = > this.testContent = e)}} $attrs / $listeners

$attrs

Properties passed from the parent component to the custom child component are automatically set to the outermost tag inside the child component if there is no prop reception, and the class and style of the outermost tag are merged in the case of class and style.

If the child component does not want to inherit the non-prop attribute passed in by the parent component, you can use inheritAttrs to disable inheritance, and then set the externally passed non-prop attribute to the desired tag with vMyBind = "$attrs", but this does not change the class and style

Official explanation:

When the parent component passes values to the child component, but the child component does not declare all the values passed in the props, the child component can use $attrs to proxy all the values passed by the parent component.

Example: this is the parent component

At this point, through the dom, you can find that all the undeclared information appears on the root element of the subcomponent.

If you want undeclared information not to appear on the root element of the subcomponent, add an attribute at the same level as the data in the subcomponent: inheritAttrs: false; so that variables that are not received through props will not appear on the root element of the subcomponent

As for how to pass it to the subcomponents of the subcomponents. And so on, then you need to bind all the subcomponents to the subcomponents in turn: VMABind = "$attrs".

Note that this only applies to passing data.

This is the dom presentation:

This is a subcomponent: props is not declared

$listeners

Official explanation: contains v-on event listeners in the parent scope (without the .native modifier). It can pass in internal components via vMuon = "$listeners"-- useful when creating higher-level components

When the parent component passes callbacks to the child components, the child components can proxy all callbacks through $listeners.

Example: this is the parent component

This is a subcomponent.

This is the execution demonstration:

At the same time, we can find that the undeclared props accepted variables in the root component disappear after the subcomponent is added with inheritAttrs:false.

Finally: it is recommended not to use this thing, although they can relatively easily pass the properties and methods of the first-level component to any of the N-level subcomponents, but then bug positioning, or analysis of requirements will be a big challenge.

Different windows (in different tabs of the same browser)

When communicating with different tabs in the browser, most scenarios are: additions, deletions, changes and queries in the project are opened new pages, and then the list page is triggered to retrieve the list after the addition. Is there any way to do this in this scenario?

Listen to stroage events / / pages to be monitored: mounted () {window.addEventListener ('storage', this.storageEvent);}, beforeDestroy () {window.removeEventListener ()} methods: {storageEvent (e) {console.log ("triggered after a change in the story value:", e)}}

Remember: rule number one: remember to unlisten for listening events before the component is destroyed. Otherwise, it will surprise you.

Remember: rule 2: the callback of the listening method must be defined in methods and then referenced by this, otherwise you will have no effect when you release the event listener.

This is the end of the content of "how to communicate in different situations in vue". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.