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

This article mainly talks about "what are the ways of communication between Vue components". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the ways of communication between Vue components"?

Preface

Vue provides a variety of communications, including brotherly and non-brotherly communications. Take this opportunity to make a summary and make it easy to consult.

1. Props directory structure components ├── Parent.vue / / father ├── Son1.vue / / son 1 code structure

Use the son component in the parent component to pass an one-way value to the son through: date= "xxx"

Dad: {{date}} import Son1 from ". / son1"; export default {components: {Son1}, data () {return {date: 1,};},}

The son component accepts the value passed by the parent component through props

Son: {{date}} export default {props: {date: {type: Number, / / check type default: "1",}},},}; 2. $emit directory structure components ├── Parent.vue / / father ├── Son1.vue / / son 1 code structure

(recommended tutorial: Vue 2 tutorial)

The child component triggers the $emit method by touching its own method, and then triggers the method of the parent component, passing the modified content to the parent component by callback and passing parameters

Son: {{date}} modify export default {props: {type: Number, default: "1",},}, methods: {changeNum () {this.$emit ("changeNum", 2);},},}

The parent component accepts the callback params parameter, that is, the father needs to bind a custom event to his son, $on ("changeNum", params).

Dad: {{date}} import Son1 from ". / son1"; export default {components: {Son1}, data () {return {date: 1,};}, methods: {changeNum (params) {this.date = params;},},}

.sync

Directory structure components ├── Parent.vue / / father ├── Son1.vue / / son 1 code structure

The child component emits events through $emit ("update:xxx")

Son: {{date}} modify export default {props: {type: Number, default: "1",},}, methods: {changeNum () {this.$emit ("update:date", 2);},},}

The parent component accepts parameters through: xxx.sync= "xxx"

Dad: {{date}} import Son1 from ". / son1"; export default {components: {Son1}, data () {return {date: 1,};},}; / / this is written by the default component that triggers the update:count rule.

V-model

Directory structure components ├── Parent.vue / / father ├── Son1.vue / / son 1 code structure

The events triggered by child components can only be input events, and the property name that receives props can only be called value.

Son: {{value}} modify export default {props: {type: Number, default: 1,},}, methods: {changeNum () {this.$emit ("input", 2);},},}

The parent component receives parameters through v-model

Dad: {{value}} import Son1 from ". / son1"; export default {components: {Son1}, data () {return {value: 1,};},}; / / this is written by the default component that triggers the input rule.

V-model` limitation can only pass one attribute if only one can use `v-model` multiple still need to use `. Sync

```3, $parent and $children directory structure components ├── Parent.vue / / father ├── Son1.vue / / son 1 ├── Grandson1.vue / / grandson 1 code structure

The following scenario: grandson wants to pass data to grandpa, grandson needs to find the event of grandpa to pass $parent.$emit

Grandson {{value}} modify export default {props: {value: {type: Number, default: ",}

Son component uses grandson component

Son: {{value}} import grandson1 from ". / grandson1"; export default {components: {grandson1,}, props: {value: {type: Number, default: 1,}

Dad customizes change events for his grandson.

Dad: {{value}} import Son1 from ". / son1"; export default {components: {Son1}, data () {return {value: 1,};},}

If the hierarchy is deep, then $parent.$parent will appear. We can encapsulate a $dispatch method to dispatch up

Vue.prototype.$dispatch = function $dispatch (eventName, data) {let parent = this.$parent; while (parent) {parent.$emit (eventName, data); parent = parent.$parent;}}

By the same token, if you can look up for a father, you can look for a son downwards, or you can encapsulate a downward distribution method $broadcast

Vue.prototype.$broadcast = function $broadcast (eventName, data) {const broadcast = function () {this.$children.forEach ((child) = > {child.$emit (eventName, data); if (child.$children) {$broadcast.call (child, eventName, data);}}); broadcast.call (this, eventName, data);} 4. $attrs and $listeners directory structure components ├── Parent.vue / / father ├── Son1.vue / / son 1 ├── Grandson1.vue / / grandson 1

$attrs batch passes attributes downwards

Dad: {{value}} import Son1 from ". / son1"; export default {components: {Son1}, data () {return {value: 1,};},}

Use the $attrs attribute in the child component, together with v-bind, to continue to pass the property downwards

Son: {{$attrs.value}} import grandson1 from ". / grandson1"; export default {components: {grandson1,}, mounted () {console.log (this.$attrs);},}

Note: when using $attrs, if props is used in the component, the property will be removed from the current attrs

Using the $attrs attribute in the grandchild component, you can continue to pass the property down

Grandson {{$attrs.value}} export default {/ / props: {/ / value: Number, / /}, mounted () {console.log (this.$attrs);},}

If the father passes the element to the son, the son has three attributes that are not needed, and the grandson passes it to the grandson, but does not want this attribute on the page, you can set inheritAttrs: false

$listeners batch downward input method

Dad: {{value}} import Son1 from ". / son1"; export default {components: {Son1}, data () {return {value: 1,};}, methods: {change () {this.value = 2;},},}

You can use the $listeners attribute in the son1 component, and with v-on, you can continue to pass the method down

Son: {{$attrs.value}} import grandson1 from ". / grandson1"; export default {components: {grandson1,}, mounted () {console.log (this.$attrs); console.log (this.$listeners);},}

Grandchild components can directly use the methods on $listeners

Grandson {{$attrs.value}} export default {mounted () {console.log (this.$attrs); console.log (this.$listeners);},}; 5. Provide & Inject directory structure app.vuecomponents ├── Parent.vue / / father ├── Son1.vue / / son 1 ├── Grandson1.vue / / grandson 1 code structure

Declare a public data at the parent

Export default {provide () {return {vm: this};},}

The principle can be injected into the subcomponent and the data will be mounted on the current instance

Grandson export default {inject: ["vm"], mounted () {console.log (this);},}

Note: this method is confusing after use, it is generally not used in business code, often in the component library or multi-level communication, in order to facilitate you can use provide.

6. Ref directory structure components ├── Parent.vue / / father ├── Son1.vue / / son 1 code structure

Ref gets the real dom element, if placed on the component represents an instance of the current component. The method or data of the child component can be obtained directly from the parent component.

Father import Son1 from ". / son1"; export default {components: {Son1}, mounted () {this.$refs.son.show ();},},}; son export default {methods: {show () {console.log (1);},},}

Note: ref should not have the same name, but it will result in an array condition when and only if you use v-for

7. EventBus directory structure main.jscomponents ├── Grandson1.vue / / grandson 1 ├── Son2.vue / / son 2 code structure

EventBus can be used for cross-component notification (this can be used for non-complex projects)

Vue.prototype.$bus = new Vue ()

Grandson1 components and Son2 communicate with each other

Grandson 1export default {mounted () {this.$nextTick () = > {this.$bus.$emit ("test", "go");});},}

The son 2 component here can only use $on to trigger Grandson1 component events

Son 2export default {mounted () {this.$bus.$on ("test", (data) = > {console.log (data);});},}; 8, Vuex

Vuex is a state management model developed specifically for Vue.js applications.

At this point, I believe you have a deeper understanding of "what are the ways of communication between Vue 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.