超详细vue3选项式父子组件传值

一、问题背景

最近遇到了一个情景:

子组件干完事情,需要对父组件的变量进行更新,因为父组件将该变量传递给子组件,但是不会双向绑定,这时候我们就需要传值或者触发回调去解决这个问题

我们将分为两个部分

1.父组件传值给子组件

2.子组件传值给父组件

来进行讲解

二、父组件传值给子组件

注意,本文中间部分只给部分代码,完整代码在文末!!!

2.1父组件传值给子组件示例

复制代码
<ChildrenConponent @callBack="callBackFun" :datas="parentValue"></ChildrenConponent>

我们在父组件引入该子组件,然后随便定义一个要传入的变量,使用冒号:打头,后面紧跟需要传递的实际值变量

2.2子组件接收父组件传值

复制代码
const props = defineProps( ["datas"]);
values.value = props.datas;

只需要引入defineProps解析传值列表然后取出对应属性即可

三、子组件传值给父组件

3.1子组件传值给父组件示例

首先看父组件

复制代码
<ChildrenConponent @callBack="callBackFun" :datas="parentValue"></ChildrenConponent>

在使用冒号传入给子组件的值的同时,使用@callBack告诉子组件他可以调用一个名为callBack的回调,该回调后面紧跟一个声明在父组件的触发方法callBackFun

3.2父组件截取子组件调用回调示例

然后是子组件

复制代码
const emit = defineEmits(['callBack']);
emit('callBack', childValue.value);

首先导入defineEmits获取回调列表获取一个函数

然后使用回调函数传值个父组件即可(注意保持参数列表一致)

四、全部代码

4.1父组件

复制代码
<template>
    <div>
        你好!!!,我是父组件,我拿到了值:({{ values }})
    </div>
    <ChildrenConponent @callBack="callBackFun" :datas="parentValue"></ChildrenConponent>
</template>

<script setup>
import { ref } from 'vue'
import { ChildrenConponent } from './index'

const parentValue = ref("给儿子的值")
const values = ref("")
const callBackFun = (e) => {
    console.log("打印e", e)
    values.value = e;
    console.log("回调执行")
}
</script>

<style scoped>

</style>

4.2子组件

复制代码
<template>
  <div>
    我是子组件,父组件给了我({{ values }})
    <button type="text" @click="tickCallBack">我是按钮</button>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue';

const props = defineProps( ["datas"]);
const emit = defineEmits(['callBack']);
const values = ref("");
const childValue = ref("给父亲的值");

const tickCallBack = () => {
  emit('callBack', childValue.value);
  console.log("传值给父组件");
};
onMounted(()=> {
    values.value = props.datas;
})
</script>

五、效果演示

相关推荐
gnip10 分钟前
总结一期正则表达式
javascript·正则表达式
Q_9709563913 分钟前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
Wyc7240921 分钟前
Maven
java·数据库·maven
程序猿小D24 分钟前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+jsp实现的电影小说网站管理系统,推荐!
java·数据库·mysql·spring·毕业设计·ssm框架·电影小说网站
爱分享的程序员28 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘33 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出35 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的35 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解37 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵40 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端