Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What components of Vue2 communicate with each other

2025-02-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

Editor to share with you what components of Vue2 communication, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Here is a list of the ways in which each component communicates

1. Props

The parent component transmits data to the child component, which should be the most common way

After the child component receives the data, the data of the parent component cannot be modified directly. An error is reported, so when the parent component is re-rendered, the data is overwritten. It is recommended to use computed if you want to modify it within a subcomponent

/ / Parent.vue transmit / / Child.vue receive export default {/ / use array receive props: ['msg'], / / write dual-use object receive You can limit the type of data received, set default values, validate, etc. Props: {msg: {type:String, default:' this is the default data'}}, mounted () {console.log (this.msg)},} 2. .sync

It can help us realize the two-way binding of the data passed by the parent component to the child component, so the child component can modify the data directly after receiving the data, and will modify the data of the parent component at the same time.

/ / Parent.vue export default {data () {return {page:1} / / Child.vueexport default {props: ["page"], computed () {/ / when we modify the currentPage in the subcomponent The page of the parent component will also change currentPage {get () {return this.page}, set (newVal) {this.$emit ("update:page", newVal)} 3. V-model

Similar to .sync, the data passed from the parent component to the child component can be bidirectionally bound, and the child component modifies the data of the parent component through $emit

/ / Parent.vue export default {data () {return {value:1} / / Child.vue export default {props: ["value"], / / you can modify the event name Default is input model: {event: "updateValue"}, methods: {handlerChange (e) {this.$emit ("input", e.target.value) / / if there is such a rename as above, this.$emit ("updateValue", e.target.value)}} 4. Ref

Ref if it is on a normal DOM element, the reference points to that DOM element

If on a child component, the reference points to the child component instance, then the parent component can actively obtain the properties of the child component or call the method of the child component through the ref

/ / Child.vueexport default {data () {return {name: "Muhua"}} Methods: {someMethod (msg) {console.log (msg)} / / Parent.vue export default {mounted () {const child = this.$refs.child console.log (child.name) / / Muhua child.someMethod ("method of sub-component called")}} 5. $emit / v-on

Child components send data to the parent component by dispatching events, or trigger operations such as parent component updates

/ / Child.vue dispatches export default {data () {return {msg: "this is a message to the parent component"}}, methods: {handleClick () {this.$emit ("sendMsg", this.msg)}} } / / Parent.vue response / / or abbreviated export default {methods: {getChildMsg (msg) {console.log (msg) / / this is the message received by the parent component} 6. $attrs / $listeners

When multi-tier nested components pass data, you can use this if you just pass data without intermediate processing, such as when the parent component passes data to the grandchild component

Attrs: contains a collection of non-props attributes in the parent scope except class and style. To get a collection of all the eligible attributes in the parent scope through this.$attrs, and then continue to pass them to other components within the child component, you can use vMedibind = "$attrs"

Listeners: contains a collection of listening events except .native in the parent scope. If you want to continue to pass it to other components within the subcomponent, you can use vMuon = "$linteners"

Use it in the same way

/ / Parent.vue {console.log ("this is the data received:", data)}, beforeDestroy () {/ / unlisten Bus.$off ("sendMsg")}} 10. Vuex

Vuex is the state manager, and centralized storage manages the state of all components. This piece of content is too long, if you are not familiar with the basic, you can see this Vuex, and then the general usage is as follows

Such as creating a file structure like this.

The content in index.js is as follows:

Import Vue from 'vue'import Vuex from' vuex'import getters from'. / getters'import actions from'. / mutations'import state from'. / state'import user from'. / modules/user'Vue.use (Vuex) const store = new Vuex.Store ({modules: {user}, getters, actions, mutations, state}) export default store

Then introduce in main.js:

Import Vue from "vue" import store from ". / store" new Vue ({el: "# app", store, render: h = > h (App)})

Then in the required usage components:

Import {mapGetters, mapMutations} from "vuex" export default {computed: {/ / method one and then through this. The attribute name can be used. MapGetters (["introducing attribute 1", "attribute 2" in getters.js]) / / method two. MapGetters ("user", ["attribute 1" in the user module, "attribute 2"])}, methods: {/ / method one and then through this. The property name can be used. MapMutations (["method 1", "method 2" in mutations.js]) / / method 2. MapMutations ("user", ["method 1" in the user module, "method 2"])}} / / or you can get this.$store.state.xxxthis.$store.state.user.xxx11 in this way. $root

$root can get the data and methods in App.vue

12. Slot

Is to transfer the data of the child component to the parent component through the slot, and then plug it back in.

/ / Child.vue export default {data () {return {user: {name: "Muhua"} / / Parent.vue {{slotProps.user.name}} these are all the contents of the article "what are the components of Vue2 Communication". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report