耀极客论坛

 找回密码
 立即注册
查看: 3186|回复: 0

vue3组件通信的方式总结及实例用法

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 02:13:12 | 显示全部楼层 |阅读模式
  在本篇文章里小编给大家整理的是一篇关于vue3组件通信的方式总结及实例用法,对此有兴趣的朋友们可以跟着学习下。
  vue3组件通信方式为以下几种
       
  • props   
  • $emit   
  • $expose / ref   
  • $attrs   
  • v-model   
  • provide / inject   
  • Vuex   
  • mitt
props
  1. ‹child :msg2="msg2" />
  2. ‹script setup>
  3.     const props = defineProps({
  4.         // 写法一
  5.         msg2:String
  6.         // 写法二
  7.         msg2:{
  8.             type:String,
  9.             default:''
  10.         }
  11.     })
  12.     console.log(props) // {msg2:'这是传级子组件的信息2'}
  13. ‹/script>
复制代码
$emit
  1. //Child.vue
  2. ‹template>
  3.     // 写法一
  4.     ‹div @click="emit('myclick')">按钮‹/div>
  5.     // 写法二
  6.     ‹div @click="handleClick">按钮‹/div>
  7. ‹/template>
  8. ‹script setup>
  9.     // 方法一
  10.     const emit = defineEmits(['myClick'],['myClick2'])
  11.     // 方法二
  12.     const handleClick = () => {
  13.         emit('myClick','这是发送给父组件的信息');
  14.      }
  15.       
  16.      // 方法二 不适用于vue3.2,使用的useContext()已经舍弃
  17.      import { useContext } from 'vue'
  18.      const { emit } = useContext()
  19.      const handleClick = () => {
  20.       emit('myClick','这是发送给父组件的信息'   
  21.      }
  22. ‹/script>
  23. // Parent.vue响应
  24. ‹template>
  25.     ‹child @myClick="onMyClick">‹/child>
  26. ‹/template>
  27. ‹script setup>
  28.     import child from "./child.vue"
  29.     import onMychilk = (msg) => {
  30.         console.log(msg) // 父组件收到的信息
  31.     }
  32. ‹/script>
复制代码
expose / ref
  父组件获取子组件的属性或者调用子组件方法
  1. ‹script setup>
  2.     // 方法一:useContext() vue3.2 之后已经舍弃
  3.     import { useContext } from 'vue'
  4.     const ctx = useContext()
  5.     // 对外暴露属性方法等都可以
  6.     ctx.expose({
  7.         childName: '这是子组建的属性',
  8.         someMethod(){
  9.         console.log('这是子组件的方法')
  10.         }
  11.     })
  12. ‹/script>
  13. // Parent.vue 注意 ref="comp"
  14. ‹template>
  15.     ‹child ref="comp">‹/child>
  16.     ‹button @click="handleClick">按钮‹/button>
  17. ‹/template>
  18. ‹script>
  19.     import child from './child.vue'
  20.     import { ref } from 'vue'
  21.     const comp = ref(null)
  22.     const handleClick = () => {
  23.         console.log(comp.value.childName)
  24.         comp.value.someMethod() // 调用子组件对外暴露的方法
  25.     }
  26. ‹/script>
复制代码
attts
  attrs:包含父作用域除class和style除外的非props属性集合
  1. // 父组件
  2. ‹child :msg1="msg1" :msg2="msg2" title="3333">‹/child>
  3. ‹script setup>
  4.     import child from './child.vue'
  5.     import { ref,reactive } from 'vue
  6.     const msg1 = ref('111')
  7.     const msg2 = ref('222')
  8. ‹/script>
  9. // 子组件
  10. ‹script setup>
  11.     import { defineProps,useContext,useAttars } from 'vue'
  12.     const props = defineProps({
  13.         msg1: String
  14.     })
  15.      
  16.     // 方法1
  17.     const ctx = useContext()
  18.     console.log(ctx.attars) // {msg2:'222',title:'333'}
  19.      
  20.     // 方法2
  21.     const attrs = useAttars()
  22.     console.log(attars)  // {msg2:'2222',title:'3333'}
  23. ‹/script>
复制代码
v-model
  可以支持多个数据双向绑定
  1. ‹child v-model:key="key" v-modle:value="value" />
  2. ‹script>
  3.     import child from './child.vue'
  4.     import { ref,reactive } from 'vue'
  5.     const key = ref('111')
  6.     const value = ref('222')
  7. ‹/script>
  8. //子组件
  9. ‹template>
  10.    ‹button @click="handleClick">‹/button>
  11. ‹/template>
  12. ‹script setup>
  13.     // 方法一  v3.2 已被移除
  14.     import { useContext } from 'vue'
  15.     const { emit } = useContext()
  16.      
  17.     // 方法二
  18.     import { defineEmits } from 'vue'
  19.     const emit = defineEmits(['key','value'])
  20.      
  21.     //用法
  22.     const handleClick = () => {
  23.         emit('update:key','新的key')
  24.         emit('update:value','新的value')
  25.     }
  26. ‹/script>
复制代码
provide / inject
  provide/inject为依赖注入 provide:可以让我们指定想要提供给后代组件的数据 inject:在任何后代组件中接受想要添加在这个组件上的数据,不管组件嵌套多深都可以直接拿来用
  1. // 父组件
  2. ‹script setup>
  3.     import { provide } from 'vue'
  4.     const name = provide('name')
  5.     console.log('name','沐华')
  6. ‹/script>
  7. //子组件
  8. ‹script setup>
  9.     import { inject } from 'vue'
  10.     const name = inject('name')
  11.     console.log(name) //木华
  12. ‹/script>
复制代码
Vuex
  1. //store/index.js
  2. import { createStore } from 'vuex'
  3. export default createStore({
  4.     state:{count:1},
  5.     getters:{
  6.         getCount:state=>state.count
  7.     },
  8.     mutations:{
  9.         add(state){
  10.             state.count++
  11.         }
  12.     }
  13.    })
  14. // main.js
  15. import { createApp } from 'vue'
  16. import APP from './App.vue'
  17. import store from './store'
  18. createApp(APP).use(store).mount("#app")
  19.   
  20. // 直接使用
  21. ‹template>
  22.      ‹div>
  23.          {{ $store.state.count }}
  24.      ‹/div>
  25.      ‹button @click="$store.commit('add')">
  26.      ‹/button>
  27. ‹/template>
  28.   
  29. // 获取
  30. ‹script setup>
  31.      import { useStore,computed } from 'vuex'
  32.      const store = useStore()
  33.      console.log(store.state.count)
  34.       
  35.      const count = computed (()=>store.state.count)
  36.      console.log(count)
  37. ‹/script>
复制代码
mitt
  Vue3中已经没有了EventBus跨组件通信,替代方案mitt.js,但原理方式EventBus是一样的
安装方式 npm i mitt -S
  封装
  1. mitt.js
  2. import mitt from 'mitt'
  3. const mitt = mitt()
  4. export default mitt
复制代码
  组件之间使用
  1. // 组件A
  2. ‹script setup>
  3.     import mitt from './mitt'
  4.     const handleClick = () => {
  5.         mitt.emit('handleChange')
  6.     }
  7. ‹/script>
  8. // 组件B
  9. ‹script setup>
  10. import mitt from './mitt'
  11. import { onUnmounted } from 'vue'
  12. const someMethod = () => {...}
  13. mitt.on('handleChange',someMethod)
  14. onUnmounted(()=>{
  15.     mitt.off('handleChange',someMethod)
  16. })
  17. ‹/script>
复制代码
  到此这篇关于vue3组件通信的方式总结及实例用法的文章就介绍到这了,更多相关vue3组件通信的几种方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 18:41 , Processed in 0.074934 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表