vue3组件之间通信(二)——子传父属性和方法
2024-05-10 16:38:24
文章目录
- 1：setup函数传递属性和方法
- （1）子组件传值和方法给父组件
- （2）使用ref的方式来在父组件中获取子组件的数据和方法
- 2：script setup 语法糖传递属性和方法
- （1）子组件传值和方法给父组件
- （2）使用ref的方式来在父组件中获取子组件的数据和方法
前言：理论上来讲，子组件修改父组件的值是可以的，但是由于父组件的可以引用多个子组件，其中一个子组件改了父组件的值后，其他的子组件的数据可能会有问题，所以不推荐使用子组件修改父组件的值，而是在父组件中定义属性和方法，在子组件中修改。
1：setup函数传递属性和方法
（1）子组件传值和方法给父组件
①：父组件
<template><div class="father"><h1>父组件:{{ fatherMsg }}</h1><button @click="clickFather">点我（调用子组件的方法）</button><son @getMsessage="getMsessage" /></div>
</template>
<script>
import { defineComponent, ref } from "vue";
import son from "./son.vue";
export default defineComponent({components: {son,},setup(prop, ctx) {const fatherMsg = ref("");function getMsessage(params) {fatherMsg.value = params;console.log("父组件的方法被触发了one", params);}return {fatherMsg,getMsessage,};},
});
</script>
<style scoped>
.father {width: 200px;height: 200px;border: 1px solid red;
}
</style>②：子组件
<template><div class="son"><h2>子组件</h2><button @click="getMsessage">点我传值给父组件</button></div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({setup(prop, ctx) {const message = ref("子组件的值--张三");function getMsessage() {console.log("进来了");ctx.emit("getMsessage", message);}return {message,getMsessage,};},
});
</script>
<style scoped>
.son {width: 200px;height: 100px;border: 1px solid green;
}
</style>③：效果
④：代码步骤说明
大致思路就是父组件传一个方法给子组件，然后子组件要传值给父组件的时候，通过点击事件触发父组件的方法，将子组件要传的值当成参数传给父组件的方法，然后就可以在父组件定义一个值用来接收这个参数了
⑤：子组件传方法给父组件并触发，和上面步骤一样
function getMsessage(params) {fatherMsg.value = params;console.log("父组件的方法被触发了one", params());}
（2）使用ref的方式来在父组件中获取子组件的数据和方法
①：父组件
<template><div class="father"><h1>父组件:{{ fatherMsg }}</h1><button @click="clickFather">点我（调用子组件的方法）</button><son ref="sonRef" /></div>
</template>
<script>
import { defineComponent, ref } from "vue";
import son from "./son.vue";
export default defineComponent({components: {son,},setup(prop, ctx) {const fatherMsg = ref("");const sonRef = ref(null);function clickFather() {console.log("父组件", sonRef.value.message);fatherMsg.value = sonRef.value.message;sonRef.value.clickSon();}return {fatherMsg,clickFather,sonRef,};},
});
</script>
<style scoped>
.father {width: 200px;height: 200px;border: 1px solid red;
}
</style>②：子组件
<template><div class="son"><h2>子组件</h2></div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({setup(prop, ctx) {// 子组件的值const message = ref("子组件的值--张三");// 子组件的方法function clickSon() {console.log("son的log");}return {message,clickSon,};},
});
</script>
<style scoped>
.son {width: 200px;height: 100px;border: 1px solid green;
}
</style>③：效果
④：代码步骤说明
2：script setup 语法糖传递属性和方法
（1）子组件传值和方法给父组件
①：父组件
<template><div class="father"><h1>父组件: {{ fatherMsg }}</h1><son @clickFather="clickFather" /></div>
</template>
<script setup>
import { ref } from "vue";
import son from "./son.vue";
const fatherMsg = ref("");
function clickFather(params) {fatherMsg.value = params;console.log("父组件的方法被触发了", params);
}
</script>
<style scoped>
.father {width: 200px;height: 200px;border: 1px solid red;
}
</style>②：子组件
<template><div class="son"><h2>子组件</h2><button @click="clickSon">点我</button></div>
</template>
<script setup>
import { defineProps, defineEmits, ref } from "vue";const emits = defineEmits(["clickFather"]);
// 子组件的值
const message = ref("父组件的值---李四");
// 子组件的方法
function clickSon() {emits("clickFather", "子组件的值4");
}
</script>
<style scoped>
.son {width: 200px;height: 150px;border: 1px solid green;
}
</style>③效果
④代码说明：大致逻辑和setup思路是一样的
（2）使用ref的方式来在父组件中获取子组件的数据和方法
①：父组件
<template><div class="father"><h1>父组件: {{ fatherMsg }}</h1><button @click="clickFather">点我触发自组件的值和方法</button><son ref="sonRef" /></div>
</template>
<script setup>
import { ref } from "vue";
import son from "./son.vue";const sonRef = ref(null); // 子组件的refconst fatherMsg = ref("");
function clickFather() {fatherMsg.value = sonRef.value.message;sonRef.value.clickSon();
}
</script>
<style scoped>
.father {width: 200px;height: 200px;border: 1px solid red;
}
</style>②：子组件
<template><div class="son"><h2>子组件</h2></div>
</template>
<script setup>
import { ref } from "vue";
// 子组件的值
const message = ref("父组件的值---李四");
// 子组件的方法
function clickSon() {console.log("son的log");
}defineExpose({message,clickSon,
});
</script>
<style scoped>
.son {width: 200px;height: 150px;border: 1px solid green;
}
</style>③效果
④代码说明（重点就是要使用子组件的ref需要defineExpose）
vue3组件之间通信(二)——子传父属性和方法相关推荐
- 前端学习（2958）：组件之间的参数传递子传父
- vue组件化通信之子向父传值
vue组件化通信之子向父传值 vue组件化通信之兄弟组件传值 vue中子向父传递消息一般使用$emit,方法比较简单,直接看代码 父组件 <template><div>< ...
- Vue组件间的通信【子传父，父传子，同级传递，爷孙传递】
Vue组件间的通信 引出问题 vue一个重要的思想就是组件化开发,说到组件化开发,提高结构样式行为的复用性,组件写好了,但组件间之间数据如何传递,就成了一个问题- vue 组件之间是可以相互嵌套的,就 ...
- 父子组件传值之（子传父）
当我们在需要把子页面的数据传递给父页面时,就需要用到子传父通信. 下面是要把封装好的验证码组件放到父组件里面使用,由于是子组件里面生成的验证码,所以这里要把子组件的值传递到父组件里面去,用于校验判断. ...
- vue中父传子和子传父，传值方法
1.关于传值的规则 props值是对象的时候,传递的属性以对象的形式保存在props里面,对象里面的字段可以对传递的属性进行验证或者添加一些匹配验证规则. <div id="app&q ...
- vue3组件之间通信(一)——父传子属性和方法
文章目录 一:setup函数传递 1:父组件传值给子组件 2:父组件传方法给子组件(使用了":"和"@"两种形式来传方法) 二:script setup 语法糖 ...
- vue3组件之间通信(三)——爷孙组件传递属性和方法
文章目录 1:setup函数传递属性和方法($attrs) 1:代码 2:主要代码和详细讲解 3:注意点 2:script setup 语法糖传递属性和方法 1:代码 2:主要代码和详细讲解 3:注意 ...
- Vue3 - 组件通信（子传父）
前言 相比 Vue2,仅仅是使用方法上发生变化,其他没变. 首先来回忆一下,在 Vue2 中,子组件的值是如何传递给父组件的? 使用一个叫 $emit() 的方法,第一个参数是事件名,第二个参数是具体 ...
- 如何实现组件之间的通信（父传子，子传父，兄弟组件互传）
一.父传子 1.父传子通用的方法就是借助props这个属性 (1)如下图我创建了一个Dom组件,并将它引入到父组件App.vue中 (2)下面我在父组件定义一个变量msg并赋值,然后通过在子组件上写上 ...
最新文章
- CVE-2013-2551漏洞成因与利用分析（ISCC2014 PWN6）
- ICCV 2021 Workshop 盘点
- windows server 2008 r2 enterprise ,惠普DL 580 G7服务器报，事件 ID: 47错误。
- 了解.NET中的垃圾回收
- 传感器信号处理仿真实验(c语言实现)，均值滤波，滑动滤波
- Python的1~100奇数之和
- 课后作业-阅读任务-阅读提问-4
- linux malloc free 内存碎片_内存申请malloc/new与内存释放free/delete的区别
- X86汇编语言从实模式到保护模式14：用户程序编程接口及其实现
- oracle服务器配置及优化
- C语言99乘法表代码案例
- 也许你不知道：越自我，越自由！
- Linux服务器键盘鼠标插口,关于Linux下鼠标键盘
- F5 GTM DNS 知识点和实验 4 -智能DNS基础
- 记一次失败的小米前端面试经历
- 趣图：看到网友晒了新抱枕，我也想换个新的了
- 专业工作站版、企业版、企业LTSC版、Servers版哪个更稳定更适合应对灾难
- (2)二叉树由后序(LRD)和中序(LDR)得到前序(DLR)
- vs2010 LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
- 【005】Nginx学习笔记-Nginx真实IP