vue3父子组件通信

应用场景

子组件中的值发生改变时，向父组件传递一个标识符代表子组件的值已被改变，通过这个标识符对业务进行不同的处理。

基本思路

在子组件被监听的组件上绑定@change事件，@change调用传参方法向父组件传参，在父组件本地定义一个的参数在接收到子组件时赋值，如果父组件的值为undenfine则代表子组件未改变。
就像盖章一样，我改过一次就盖一个章，有章就是改过了，没有章就是没改过。

但是这样会造成一个问题，如果用户改了之后又改回来，点击触发事件依然会判定是修改过。所以我们这里主要讨论父子组件通信的问题，给大家一些思路。

子组件

<被监听的组件 @change="isChanged">
import { reactive } from 'vue'
const emit = defineEmits(['getData'])
const isChanged = () => {emit('getData', true)}

父组件

<子组件 @get-data="getData"></SaveForm>const getData = (flag: boolean) => {console.log(flag)}

每当组件被修改时都会自动触发getData函数往父组件传参，子组件中的 @get-data只需要与后面的函数名对应即可。例如： @get-child-data=”getChildData也可以，注意驼峰命名。

vue3父子组件通信相关推荐

vue3 父子组件通信
前提:封装组件是前端开发必备的,所以父子组件的通信相当重要,接下来总结下vue3父子组件通信的知识点,使用<script setup>语法糖一.defineProps 和 defineE ...
Vue3父子组件间传参通信
Vue3 父子组件间通信前言一.父传子 defineProps 二.子传父 defineEmits 三.子组件暴露属性给父组件 defineExpose 四.依赖注入Provide / Injec ...
vue3之组件通信（props父传子，子传孙）（ts定义数组类型）
目录 vue3之组件通信 1 props父传子,子传孙 1-1 父组件 1-2 子组件 1-3 孙组件 2:父子传值 2:-1 父组件向子组件传值 Props 2-2 子组件向父组件传值 emit 3 ...
父子组件通信之v-model
我们都知道父子组件通信有很多方法,v-model就是其中一种,v-model可以实现数据双向绑定, v-model就是v-bind 和@input事件的语法糖意思就是 v-bind:value 和 ...
子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
Vue.js-Day04-AM【父子组件通信（父传子、子传父）、动态组件、组件的生命周期、动画】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.复习父子组件通信 1.1.父传子(自定义属性) 1.2.子传父(自定义事件) 2.动态组件 2.1.实现 ...
Vue.js-Day03-PM【组件通信（安装Vetur插件、父子组件通信、子父组件通信）、项目发送与启动（项目发给别人、启动别人的项目）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 6.组件通信安装 Vetur 插件 6.1.父子组件通信子定义props 父组件模板图解 6.2.子父组 ...
vue组件通信之父子组件通信
准备工作: 首先,新建一个项目,如果这里有不会的同学,可以参考我转载过的文章 http://www.cnblogs.com/Sky-Ice/p/8875958.html vue 脚手架安装及新建项目 ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...

vue3父子组件通信

应用场景

基本思路

vue3父子组件通信相关推荐

最新文章

热门文章