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

Several ways for vue3 components to communicate are as follows

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

Share

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

Several ways of vue3 component communication are like this. I believe that many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Vue3 components communicate in the following ways

Props

$emit

$expose / ref

$attrs

V-model

Provide / inject

Vuex

Mitt

Props const props = defineProps ({/ / one msg2:String / / two msg2: {type:String Default:''}}) console.log (props) / / {msg2:' this is the information of the transfer level subcomponent 2'} $emit//Child.vue / / one button / / two buttons / / method one const emit = defineEmits (['myClick'], [' myClick2']) / / method two const handleClick = () = > {emit ('myClick') "this is the message sent to the parent component") } / / method 2 is not applicable to vue3.2 The useContext () used has discarded import {useContext} from 'vue' const {emit} = useContext () const handleClick = () > {emit (' myClick',' this is the message sent to the parent component'} / / Parent.vue response import child from ". / child.vue" import onMychilk = (msg) = > {console.log (msg) / / message received by the parent component} expose / ref

The parent component acquires the properties of the child component or calls the child component method

/ / method 1: useContext () vue3.2 has discarded import {useContext} from 'vue' const ctx = useContext () / / all exposed attribute methods can ctx.expose ({childName:' this is a subset property' SomeMethod () {console.log ('this is a subcomponent's method')}) / / Parent.vue Note ref= "comp" button import child from'. / child.vue' import {ref} from 'vue' const comp = ref (null) const handleClick = () = > {console.log (comp.value.childName) comp.value.someMethod () / / call the method of exposing subcomponents} attts

Attrs: a collection of non-props attributes containing the parent scope except class and style

/ / parent component import child from'. / child.vue' import {ref,reactive} from 'vue const msg1 = ref (' 111') const msg2 = ref ('222') / / Child component import {defineProps,useContext,useAttars} from' vue' const props = defineProps ({msg1: String}) / / method 1 const ctx = useContext () console.log (ctx.attars) / / {msg2:'222' Title:'333'} / / method 2 const attrs = useAttars () console.log (attars) / / {msg2:'2222',title:'3333'} v-model

Can support multiple two-way data binding

Import child from'. / child.vue' import {ref,reactive} from 'vue' const key = ref (' 111') const value = ref ('222') / / Sub-component / / method 1 v3.2 has been removed import {useContext} from' vue' const {emit} = useContext () / method II import {defineEmits} from 'vue' const emit = defineEmits ([' key'') 'value']) / / usage const handleClick = () = > {emit (' update:key',' new key') emit ('update:value',' new value')} provide / inject

Provide/inject injects provide for dependency: allows us to specify the data we want to provide to future components inject: accept the data you want to add to this component in any descendant component, no matter how deeply the component is nested

/ / parent component import {provide} from 'vue' const name = provide (' name') console.log ('name' ) / Sub-component import {inject} from 'vue' const name = inject (' name') console.log (name) / / Muhua Vuex / / store/index.js import {createStore} from 'vuex' export default createStore ({state: {count:1}, getters: {getCount:state= > state.count}) Mutations: {add (state) {state.count++}) / / main.js import {createApp} from 'vue' import APP from'. / App.vue' import store from'. / store' createApp (APP) .use (store) .mount ("# app") / / Direct connection {{$store.state.count}} / / get import {useStore Computed} from 'vuex' const store = useStore () console.log (store.state.count) const count = computed (() = > store.state.count) console.log (count) mitt

There is no EventBus cross-component communication in Vue3, the alternative is mitt.js, but the principle is the same as EventBus.

Installation mode npm i mitt-S

Encapsulation

Mitt.jsimport mitt from 'mitt'const mitt = mitt () export default mitt

Use between components

/ / component An import mitt from'. / mitt' const handleClick = () = > {mitt.emit ('handleChange')} / / component B import mitt from'. / mitt'import {onUnmounted} from 'vue'const someMethod = () = > {...} mitt.on (' handleChange',someMethod) onUnmounted (() = > {mitt.off ('handleChange',someMethod)}) Have you mastered several ways for vue3 components to communicate in this way? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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