美文网首页vue
Vue3组件通讯六种方式

Vue3组件通讯六种方式

作者: 宏势 | 来源:发表于2022-06-30 11:33 被阅读0次

目前最常用是props/$emitvuex/pinia ,接下来是 provide/inject,其他不建议使用;
实际项目中,简单父子组件传递采用props/$emit ,涉及全局共享的数据一般采用 vuex/pinia 结合存储对象localStorage/sessionStorage使用

1.props/$emit

1.props 单向数据流,父组件向子组件传递数据,不允许子组件修改props
2.支持传递静态或者动态prop,支持多种数据类型,包含数组,复杂对象
3.支持prop验证类型检查

静态prop

<blog-post title="My journey with Vue"></blog-post>  //不加冒号

动态prop

<blog-post
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>

传递对象所有property

post: {
  id: 1,
  title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post>

类型检查校验

app.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 值会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组的默认值必须从一个工厂函数返回
      default() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须与下列字符串中的其中一个相匹配
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组的默认值不同,这不是一个工厂函数——这是一个用作默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
})

子组件通过自定义事件传递给父组件

<template>
  <div>
    {{title}}
    <event-view @updateTitle="changeTitle"></event-view>
  </div>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue';
import EventView from "@/views/test/EventView.vue";

export default defineComponent({
  components: {EventView},
  setup() {
    const title = ref("我是父组件")
    return {
      title,
    };
  },
  methods:{
    changeTitle(val){
      this.title = val;
    }
  },
})
</script>

子组件

<template>
  <div><a-button type="primary" @click="$emit('updateTitle','子组件修改了组件')">我是子组件</a-button></div>
</template>
<script setup lang="ts">
  import {defineExpose, ref} from "vue";
  defineEmits(['updateTitle']);
</script>

2.Vuex/Pinia

vuex 是针对vue的一个状态管理插件,vue3 匹配vuex4,vue2匹配vuex 3的版本,包含六个核心概念:state getter mutations actions modules

  • actions 可以包含任意异步操作, mutations 是同步操作,modules为了分割大状态
    主要针对多个组件共享状态时:
  • 多个视图组件依赖统一状态
  • 来自不同的视图的行为需要变更同一状态

1.定义state数据

import { createStore } from 'vuex'
interface User{
    name:string,
    age:number,
    status:boolean
}
const usersModule = {
    state: () => ({
        users :[{
            name: 'test111',
            age: 231,
            status: true,
        }],
    }),
    getters: {
        getActiveUsers:(state) => {
            return state.users.filter(user => user.status);
        },
    },
    mutations: {
        addUser(state,user:User){
            state.users.push(user);
        }
    },
    actions: {
        addUser(context,user:User){
            context.commit('addUser',user)
        }
    },

}
export const vueStore = createStore({
    modules: {
        users: usersModule,
    }
})

  1. 绑定实例全局
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.use(vueStore)
···

3.组件使用

<template v-for="user in users" :key="user.name">
      <div>{{user.name}}|{{user.age}}|{{user.status}}</div>
</template>
<script setup lang="ts">
    import {computed} from "vue";
    import { useStore } from 'vuex'
    const store = useStore();
    // 在 computed 函数中访问 state
    //const users = computed(() => store.state.users),
    const users = computed(()=> store.getters.getActiveUsers);//使用getters
    const changeMsg = function (){
      // 使用 mutation
      store.commit('addUser',{name:"dddfas",age:33,status:true});
      // 使用 action
      store.dispatch('addUser',{name:"111111",age:33,status:true});
    }
</script>

Pinia 是 Vue 的存储库,也是为了实现跨组件/页面共享状态,但是Pinia 提供了一个更简单的 API,具有更少的仪式,提供了 Composition-API 风格的 API,最重要的是,在与 TypeScript 一起使用时具有可靠的类型推断支持;

1.创建Pinia实例

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')
  1. 定义状态数据
import { defineStore } from 'pinia'

interface User{
    name:string,
    age:number,
    status:boolean
}

export const useUsersStore = defineStore({
    id: 'todo',
    state: () => ({     //定义共享状态users
     users :[{
         name: 'test1',
         age: 23,
         status: true,
     }]
    }),
    getters: {   //主要用于读取数据,默认是响应式的
        getActiveUsers(state){
            return state.users.filter(user => user.status)
        }
    },
    actions: { //主要用于更新数据
        addUser(user:User){
            this.users.push(user);
        }
    },

})

3.在组件/页面中使用

<template v-for="user in users" :key="user.name">
      <div>{{user.name}}|{{user.age}}|{{user.status}}</div>
</template>
<script setup lang="ts">
    import {computed} from "vue";
    import {useUsersStore} from "@/store/users";
    const usersStore = useUsersStore();
    const users = computed(()=>usersStore.getActiveUsers); //使用computed
</script>

Vuex与Pinia 默认存储在浏览器内存中,可以其它存储 比如localStorage/sessionStorage
推荐使用Pinia,更加简单便捷,只提供三个概率stategettersactions,据说Pina已经实现了Vuex5 规划的大部分内容

3.provide/inject

主要适合父子组件,父和子孙组件通讯, 可以看作是长距离的 prop,支持在setup()中使用

  • 父组件不需要知道哪些子组件使用了它 provide 的 property
  • 子组件不需要知道 inject 的 property 来自哪里
<template>
  <MyMarker />
</template>

<script>
import { provide } from 'vue'
import MyMarker from './MyMarker.vue'

export default defineComponent({
  components: {
    MyMarker
  },
  setup() {
    provide('location', 'North Pole')
    provide('geolocation', {
      longitude: 90,
      latitude: 135
    })
  }
})
</script>

使用inject

<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'

export default defineComponent({
  setup() {
    const userLocation = inject('location', 'The Universe') // The Universe 默认值
    const userGeolocation = inject('geolocation')

    return {
      userLocation,
      userGeolocation
    }
  }
})
</script>

当需要支持响应式注入,只需要在provide值使用ref 或着reactive

...
 setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    provide('location', location)
    provide('geolocation', geolocation)
  }
...

4. 内置属性 ref/$refs $children/$parent $attrs $listeners

  • ref 用于引用子组件,this.$refs 指向子组件
  • $children Vue3 已经废弃不支持了,采用$refs 方式
  • $attrs 现在包含了所有传递给组件的 attribute,包括 class 和 style
  • $listeners 对象在 Vue3 中已被移除。事件监听器现在是 $attrs 的一部分
<template>
  <div>
    {{title}}
    <a-button type="primary" @click="changeMsg">父组件</a-button>
    <event-view ref="event"></event-view>
  </div>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue';
import EventView from "@/views/test/EventView.vue";

export default defineComponent({
  components: {EventView},
  setup() {
    const title = ref("我是父组件")
    return {
      title,
    };
  },
  methods:{
    changeMsg(){
      //this.$refs.event.msg = "父组件改变了子组件"  // Object is of type 'unknown'.
      (this.$refs.event as any).msg ="父组件改变了子组件";
    }
  },
});
</script>

子组件:

<template>
  <div>{{msg}}<a-button type="primary" @click="changeParent">子组件</a-button></div>
</template>
<script lang="ts">
import {defineComponent,ref} from "vue";

export default defineComponent({
  setup(){
    let msg = ref('我是子组件');
    return {
      msg
    }
  },
  methods:{
    changeParent(){
      this.$parent.title = "子组件改变了父组件"
    }
  }

})
</script>

$attrs 方式:

<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

如果这个组件接收一个 id attribute 和一个 v-on:close 监听器,那么 $attrs 对象现在将如下所示:

{
  id: 'my-input',
  onClose: () => console.log('close 事件被触发')
}

应该尽量避免在<script setup> 使用this,即setup 入口函数引用this

5.localStorage/sessionStorage

  • localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空

  • localStorage 解决了cookie存储空间不足的问题(每条cookie为4k),一般浏览器支持的是5M,不同浏览器中会有所区别

  • 只支持字符串类型的存储,推荐getItem\setItem这两种方法对其进行存取

会话级别是标签级别的,新标签页面sessionStorage继承自之前页面的sessionStorage,但是后续两个页面的sessionStorage是单独控制的

//设置缓存
localStorage.setItem('key','value')
sessionStorage.setItem('key','value')

//获取缓存
localStorage.getItem('key')
sessionStorage.getItem('key')

//删除缓存
localStorage.removeItem('key')
sessionStorage.removeItem('key')

//清空缓存
localStorage.clear()
sessionStorage.clear()

6.eventBus

Vue2.x 使用 EventBus 事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外部的、实现了事件触发器接口的库,例如 mitttiny-emitter

相关文章

  • Vue3组件通讯六种方式

    目前最常用是props/$emit 和 vuex/pinia ,接下来是 provide/inject,其他不建议...

  • Vue3 的 7 种和 Vue2 的 12 种组件通信

    Vue2.x组件通信12种方式写在后面了,先来 Vue3 的 Vue3 组件通信方式 props $emit ex...

  • Vue3 过10种组件通讯方式

    本文简介 点赞 + 关注 + 收藏 = 学会了 本文讲解 Vue 3.2 组件多种通讯方式的基础用法,并且使用了 ...

  • provide inject在vue2和vue3中的使用

    vue2父组件 vue2子组件 vue3父组件 vue3子组件 vue3官方详细使用provide inject地...

  • Vue3.x 父子通讯

    在Vue3中进行父子的通讯,原理和Vue2做法差不多 1.父组件向子组件传递数据:自定义属性props 2.子组件...

  • Vue3.x 父子通讯

    在Vue3中进行父子的通讯,原理和Vue2做法差不多 1.父组件向子组件传递数据:自定义属性props 2.子组件...

  • VUE3的组件通讯

    1、场景一:父组件A页面有个按钮触发,使得子组件B弹框出现,并且子组件有关闭按钮可以关闭弹框。使用的是van-po...

  • vue3+ts获取组件Type-safe ref 实例

    在 vue3 中获取组件的类型: 在template中获取组件的ref tsx等render组件中获取的方式更简单...

  • vue组件如何通信?有几种方式?

    在vue中组件通讯可以分为父子组件通讯和非父子组件通信。父组件通过props的方式向子组件传递数据,而子组件可以通...

  • react 组件通讯的三种方式

    一、父子组件传值 注意:函数组件和类组件是不同的接收方式的 二、子传父通讯 三、兄弟组件通讯

网友评论

    本文标题:Vue3组件通讯六种方式

    本文链接:https://www.haomeiwen.com/subject/soevvrtx.html