Chinaunix首页 | 论坛 | 博客
  • 博客访问: 32004
  • 博文数量: 31
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 315
  • 用 户 组: 普通用户
  • 注册时间: 2021-05-20 10:41
文章分类
文章存档

2022年(31)

我的朋友

分类: HTML5

2022-01-07 11:44:53

Vue3 组件通信方式

1. props

2. $emit

3. expose / ref

4. attrs

5. v-model

6. provide / inject

7. Vuex

8. mitt

Vue3 通信使用写法

1. props
用 props 传数据给子组件有两种方法,如下

方法一,混合写法

// Parent.vue 传送


 
// Child.vue 接收


方法二,纯 Vue3 写法(语法糖)

// Parent.vue 传送


 
// Child.vue 接收


注意:

如果父组件是混合写法,子组件纯 Vue3 写法的话,是接收不到父组件里 data 的属性,只能接收到父组件里 setup 函数里传的属性

如果父组件是纯 Vue3 写法,子组件混合写法,可以通过 props 接收到 data 和 setup 函数里的属性,但是子组件要是在 setup 里接收,同样只能接收到父组件中 setup 函数里的属性,接收不到 data 里的属性

官方也说了,既然用了 3,就不要写 2 了,所以不推荐混合写法。前端培训下面的例子,一律只用纯 Vue3 的写法,就不写混合写法了

2. $emit
// Child.vue 派发


 
// Parent.vue 响应



3. expose / ref
父组件获取子组件的属性或者调用子组件方法

// Child.vue

 
// Parent.vue  注意 ref="comp"



4. attrs
attrs:包含父作用域里除 class 和 style 除外的非 props 属性集合

// Parent.vue 传送


 
// Child.vue 接收


5. v-model
可以支持多个数据双向绑定

// Parent.vue


 
// Child.vue



6. provide / inject
provide / inject 为依赖注入

provide:可以让我们指定想要提供给后代组件的数据或

inject:在任何后代组件中接收想要添加在这个组件上的数据,不管组件嵌套多深都可以直接拿来用

// Parent.vue

 
// Child.vue


7. 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")
 
// Page.vue
// 方法一 直接使用

 
// 方法二 获取


8. mitt
Vue3 中没有了 EventBus 跨组件通信,但是现在有了一个替代的方案 mitt.js,原理还是 EventBus

先安装 npm i mitt -S

然后像以前封装 bus 一样,封装一下

mitt.js
import mitt from 'mitt'
const mitt = mitt()
export default mitt
复制代码
然后两个组件之间通信的使用


// 组件 A

 
// 组件 B 

————————————————
版权声明:本文为「尚硅谷」的原创文章,转载请附上原文出处链接及本声明。下载相关视频学习资料到官方网站。

阅读(423) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~