Vue3中的父子、子父组件通信

最新推荐文章于 2024-08-09 18:48:50 发布

jcLee95

最新推荐文章于 2024-08-09 18:48:50 发布

阅读量1.2k

点赞数

分类专栏： JavaScript、TypeScript相关知识专题文章标签： vue.js javascript 前端 vue3

本文链接：https://blog.csdn.net/qq_28550263/article/details/121139051

版权

JavaScript、TypeScript相关知识专题专栏收录该内容

44 篇文章 6 订阅

订阅专栏

Vue3中的父子、子父组件通信方式总结

李俊才的CSDN博客

CSDN用户名：jcLee95

邮箱：291148484@163.com

1. 父组件 => 子组件 | 使用`props`

父组件（分发数据）

<!-- 在父组件中定义一些参数传给子组件 -->
<template>
  <Child :datas="datas" />
</template>
<script>
import { defineComponent } from 'vue'
import Child from '...'

export default defineComponent({

  // 定义一些数据并return给template用
  setup () {
    const datas = {hello:"world"};
    return{
      datas
    }
  },
  components:{
    Child
  }
})
</script>

子组件（接收数据）

<template>
  <div id="child" @click="clicked" ></div>
</template>
<script>
import { defineComponent } from 'vue'
import Child from '...'

export default defineComponent({
  name:"Child",
  props: {
    datas: {
      type: Object,
      default: {hello: undefined}
    }
  },
  setup (props) {
    let datas = (props as any).datas;
    const hello = datas["hello"]
    return{
      hello 
    }
  },
  methods:{
    clicked(){
      alert(this.hello)
    }
  },
  components:{
    Child
  }
})
</script>

2. 子组件 => 父组件 | 使用`ctx.emit`

比较：以前在vue2中你可能会这么干：

父组件

<!-- 父组件中定义好给子组件玩的方法 -->
<template>
  <ChildCpnt />
</template>
<script>

import ChildCpnt from "xxx"
export default{
   ...
   methods:{
     ftFunc(param){
       console.log(param);
     }
   },
   components:{
     ChildCpnt,
   }
}
</script>

子组件

<!-- 子组件中玩父组件的方法 -->
<template>
  <div @click="paly" ></div>
</template>
<script>
...
export default{
   ...
   methods:{
     play(){
       const param = "play";
       this.$emit("ftFunc",param);
     }
   }
}
</script>

在VUE3中的正确姿势（一个例子）

在vue3中组件中不能向vue2中那样直接使用 this.$emit() 。

父组件

<template>
  ...
  <div  v-if="!isCollapse" >
    <!--需要通过`@子组件接收的函数名="父组件定义的函数的函数名"`将函数传给子组件-->
    <Child
      v-for="(item,index) in datas['children']" :key="index" 
      :datas="item" 
      @addLevel3Height="addLevel3Height"
      @dropLevel3Height="dropLevel3Height"  />
  </div>
</template>

<script lang="ts">
...
export default defineComponent({
  name: 'Father',
  ...
  methods:{
    ...
    // 在父组件中定义好给子组件玩的函数
    addLevel3Height(len:number){
      this.level1SubHeight = (parseInt(this.level1SubHeight.replace("px","")) + len*46).toString() + "px";
      console.log(this.level1SubHeight);
    },
    dropLevel3Height(len:number){
      this.level1SubHeight = (parseInt(this.level1SubHeight.replace("px","")) - len*46).toString() + "px";
      console.log(this.level1SubHeight);
    },
  },
  components:{
    Child
  }
});
</script>

子组件

<template>
  <div @click="play" class="menu-level-2">
      <div class="menu-level-2-text">{{datas['name']}}</div>
  </div>
</template>

<script lang="ts">
...
export default defineComponent({
  name: 'Child',
  props: {
    ...
  },
  // 在子组件中通过`emits`来接收父组件闯过来的方法，用来从子组件向父组件通信。
  // 使用上看就和`props`接收父组件的数据使用上类似
  emits:[
    "addLevel3Height",
    "dropLevel3Height"
  ],
  setup(props, ctx){
    ...
    return {
      ctx,
    }
  },
  methods:{
    // 在子组件中玩父组件中的放啊
    play(){
      if(this.expendLevel3===false){
        this.expendLevel3 = true;
        // 使用`ctx.emit`而不是`this.emit`
        this.ctx.emit("addLevel3Height", this.datas['children'].length) 
      }
      else{
        this.expendLevel3 = false;
        this.ctx.emit("dropLevel3Height", this.datas['children'].length)
      }
    }
  }
});
</script>

【注意】：
既可以在setup中，直接通过语句或定义函数来调通知父组件执行函数；也可以将ctx对象返回，这样可以在methods中接收到这些父组件函数的开关，从而在methods中定义相应的方法来通知父组件执行函数。其中，在Vue3中提供的组合式API的setup时一个在该组件生命周期开始前执行且仅执行一次的。

3. 通过向VUE挂载全局参数方式通信

必须指出，VUE3和VUE2有一个很大的不同是，VUE3中无法直接向VUE实例的原型挂载参数，并且在VUE3组件中的this也不再只想VUE全局实例。因此，你无法向在VUE2中那样直接挂载到VUE的实例对象再在各个组件中使用this进行数据访问。

3.1 挂载全局参数 | `app.config.globalProperties`

其中，app是createApp(App)返回的VUE根组件实例。例如在main.ts中挂载axios

import { createApp } from 'vue'
import VueAxios from 'vue-axios'
import axios from 'axios'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'

const app = createApp(App)
axios.defaults.baseURL = '/api'
app.config.globalProperties.$rqst= axios       // 挂载一个全局参数 $rqst
app.config.globalProperties.$dataCtainer = {}  // 挂载一个全局参数 $dataCtainer

app.use(VueAxios, axios).use(store).use(router).mount('#app')

3.2 在组件中使用全局参数 | `getCurrentInstance`

<template>
...
</template>
<script>
import { defineComponent, getCurrentInstance } drom 'vue'
export default defineComponent({
  setup(props){
    const { proxy } = (getCurrentInstance() as any);      // 全局变量代理
    return{
      proxy
    }
  },
  methods:{
    getDatas(user:string){
      // 可以在方法中使用 proxy.全局参数名
      this.proxy.$rqst.post('/xxx/xxx',{"user":user})
      .then((response: any)=>{
        let dt = response.data.xxx;
        ...
      });
    },
  }
})
</script>

4. 通过共享状态库pinia、vuex通信

pinia：见pinia中文版 https://blog.csdn.net/qq_28550263/article/details/120721160
vuex：内容不多且比较交单，中文资料已经够详细了。因此请直接参考中文官网即可：

5. 通过自定义独立公用全局对象通信

pinia/vuex其实都是如此，也完全可以自己在外部定义一个全局数据对象，这些对象需要经过一定的特殊处理。因为即使是在另一个ts/js文件模块中导入一个类的实例，也会为其分配一块新的内存区域。也就是说在内存中导入后的对象是一个原对象的复制，当更改其值的时候原对象不会更改，因此说，自己实现的对象必须需要满足一个条件，就是使得值能够同步变化之，然后将你的对象import导入组件或者视图等等即可。