Vue3中的父子、子父组件通信
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" ><!--需要通过`@子组件接收的函数名="父组件定义的函数的函数名"`将函数传给子组件--><Childv-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 = {} // 挂载一个全局参数 $dataCtainerapp.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：内容不多且比较交单，中文资料已经够详细了。因此请直接参考中文官网即可：
- Vuex 3.X(与VUE2配套使用)
- Vuex 4.X(与VUE3配套使用)
5. 通过自定义独立公用全局对象通信
pinia/vuex其实都是如此，也完全可以自己在外部定义一个全局数据对象，这些对象需要经过一定的特殊处理。因为即使是在另一个ts/js文件模块中导入一个类的实例，也会为其分配一块新的内存区域。也就是说在内存中导入后的对象是一个原对象的复制，当更改其值的时候原对象不会更改，因此说，自己实现的对象必须需要满足一个条件，就是使得值能够同步变化之，然后将你的对象import导入组件或者视图等等即可。
Vue3中的父子、子父组件通信相关推荐
- Vue.js-Day03-PM【组件通信（安装Vetur插件、父子组件通信、子父组件通信）、项目发送与启动（项目发给别人、启动别人的项目）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 6.组件通信 安装 Vetur 插件 6.1.父子组件通信 子定义props 父组件模板 图解 6.2.子父组 ...
- Vue 父子和子父 组件通信
父子组件通信 父组件中定义一个数据 data( ) { return { money: 1111 } } 在父组件的模板中,用 v-bind 将父组件的数据绑定在子组件身上 在子组件的选项中,通过pr ...
- VUE3+TS（父子、兄弟组件通信）
目录 父传子值.方法(子调用父值.方法) 子传父值(父调用子值) 父读子(子传父)(父调用子值.方法) 兄弟(任意组件)通信 引入Mitt来完成任意组件通信 父传子值.方法(子调用父值.方法) 1.统 ...
- Vue 子父组件通信小问题
在测试使用vue-draggable-resizable组件时遇到了一个问题; vue-draggable-resizable是一个拖拽缩放组件,其中组件拖拽缩放时,参数(大小,位置)通过发射事件传递 ...
- data怎么给echart传值_通用技术 VUE 子父组件传值
为啥这点东西需要一周时间: 1.首先是水平一般,能力有限,前后端都是半吊子,再加上最近有点松劲了: 2.由于前期规划问题,在做质量统计的时候,需要做大量的数据整理.统计工作. 3.将前端的Echart ...
- vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例 子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
- Vue 进阶组件实战应用 -- 父子组件传值的应用实例（子父组件传值的两种触发方式）
基础的子组件和父组件通信已经搞定了,可以看此博客 父子组件传值基础应用 需求 现在需求是在一个父页面引用子组件,不只是要实现基本的父子组件传值.并且子组件给父组件传值的触发条件要在父页面触发. 目前小 ...
- 利用v-model实现父子组件传值——子父组件同步更新
v-model介绍 v-model 是Vue的一个很大的特色,可以实现双向数据绑定.v-model本质上是语法糖,它负责监听用户的输入事件以更新数据. v-model 在内部使用不同的属性为不同的输入 ...
- this指向-作用域、作用域链-预解析 变量提升-Vue组件传值 父子 子父 非父子-Vue数据双向绑定原理
目录 this指向 作用域.作用域链 预解析 变量提升 Vue组件传值 父子 子父 非父子 Vue数据双向绑定原理 1.this指向 函数的this指向 看调用.不看声明 (1)普通函数调用 ①函数名 ...
最新文章
- jQuery成为微软.NET开发工具的一部分了
- 解决了无法显示验证码的问题
- 计算机二级报名学校白名单,干货丨2021机器人编程赛事+等级考试攻略之教育部白名单赛事篇...
- 2019面试跳槽回顾和一点感想
- VS 2005 WEB PROJECT包括Crystal Report水晶报表的发布
- 统计信号处理基础 - 估计与检测理论 估计部分习题3.7公式推导
- 【重温经典算法之二】快速排序
- Python自动化开发学习13-联合唯一
- linux指定的文件不是虚拟磁盘,linux下挂载VHD等虚拟磁盘文件的方法
- 常见的贴片LED封装尺寸规格表
- 内存卡数据恢复，如何从内存卡恢复数据
- 使用 xrdp 远程桌面连接 RVBoards D1 哪吒开发板的桌面系统 lxde
- 4种方法！怎么把电脑上的音频传到苹果手机上？
- 查询字体文件所包含的文字
- 下水盖为什么是圆的？
- [vSphere]关闭ESXi特定警报
- 程序人生：初学者中最最最常问的问题都有哪些呢？？？
- 工作阶段总结记录20221020
- mac安装软件没权限Anywhere ---“XX” is damaged and can’t be opened. You should move it to the Trash 解决方案
- 无法安装 64 位版本的 Office