浅谈Vue3 父子传值

作者:未飞 时间:2024-05-28 15:59:21 

父传子:

1、 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据"

在这里为了大家区分我将父组件中的数据定义为 : fatherData  ,

子组件需要接收的数据定义为: sonData 。


// 父组件
<template>
 <div class="about">
   {{fatherData}}
   <!-- 父传子 -->
   <!-- 1、 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" -->
   <children :sonData="fatherData"></children>
 </div>
</template>

<script>
import children from "@/components/children"
import { defineComponent,reactive,toRefs } from "vue";
export default defineComponent({
 components:{
   children,
 },
name:"about",
setup(){
 const state = reactive({
   fatherData:"hello"
 })
 return {
   ...toRefs(state)
 }
}

})
</script>

2、子组件依旧通过 props 来接收并且在模版中使用

那么大多数情况下都会去通过父组件传递到子组件中的数据,根据这个数据去做一些特定的功能或者请求数据等等。

在 setup 钩子中第一个参数 props 就可以访问到父组件传递的数据,那么在函数中也是通过:  props.父组件传递数据的名称   来操作该数据。

setup函数接收props作为其第一个参数,props对象是响应式的(单向的父—>子),watchEffect或watch会观察和响应props的更新。不要对props对象进行解构,那样会失去响应性。在开发过程中,props对象对用户空间代码时不可变的,用户尝试修改props时会触发警告。


// 子组件
<template>
 <div class="children">
   <!-- 3、在子组件模版中使用 -->
   {{sonData}}
 </div>
</template>
<script>
export default {
name:"Children",
// 2、子组件通过 props 来接收
 props:["sonData"],
 setup(props){
   function childrenbut(){
     // props.sonData  可以访问到父组件传递的数据
     console.log(props.sonData);
   }
   return {
     childrenbut
   }
 }
}
</script>

子传父:

1、子组件触发事件通过 setup 的第二个参数 context.emit 来实现子传父 

context 上下文对象。


// 子组件
<template>
 <div class="children">
   {{sonData}}
   <!-- 1、触发事件 -->
   <button @click="childrenbut">子组件按钮</button>
 </div>
</template>
<script>
export default {
name:"Children",
 setup(props,context){
   function childrenbut(){
     console.log(context);
     // 2、通过context.emit 实现子传父
     // 第一个参数为 方法名,第二个参数为 需要传递的数据
     context.emit("change",'world')
   }
   return {
     childrenbut,
   }
 }
}
</script>

context 也可以使用结构的形式这样写


// 子组件
<script>
export default {
name:"Children",
 // 通过结构 之后直接写 emit {emit}
 setup(props,{emit}){
   function childrenbut(){
     // 省去 context.emit
     emit("change",'world')
   }
   return {
     childrenbut,
   }
 }
}
</script>

来源:https://blog.csdn.net/weifei20001217/article/details/120725337

标签:Vue,父子,传值
0
投稿

猜你喜欢

  • TensorFlow梯度求解tf.gradients实例

    2023-08-16 17:26:03
  • asp查询xml的代码 不刷新页面查询的方法

    2011-04-06 11:00:00
  • python输入错误后删除的方法

    2023-07-25 11:55:09
  • 如何把Recordset转换成彩色的XML文件?

    2009-11-02 20:22:00
  • python如何实现从视频中提取每秒图片

    2023-10-15 11:36:25
  • 一个基于flask的web应用诞生 用户注册功能开发(5)

    2021-10-19 00:48:12
  • asp如何在线查询本地机的文件?

    2010-06-22 21:19:00
  • 解决python matplotlib imshow无法显示的问题

    2023-07-19 23:59:25
  • Opencv图像处理:如何判断图片里某个颜色值占的比例

    2023-09-27 16:57:40
  • Python访问Redis的详细操作

    2022-03-13 13:22:25
  • Python中协程用法代码详解

    2021-01-26 06:33:24
  • 解决MySQL数据库链接超时报1129错误问题

    2024-01-17 12:15:04
  • 2行Python实现给图片加水印效果

    2021-09-29 11:15:13
  • css分页放大镜效果

    2008-11-02 15:35:00
  • 纯数字不重复排列的另类方法

    2009-12-04 18:25:00
  • javascript变量提升和闭包理解

    2024-04-10 16:17:06
  • THREE.JS入门教程(5)你应当知道的十件事

    2024-04-18 10:52:01
  • 将mater库中的系统存储过程批量生成*.sql文件 通用且非常实用

    2012-06-06 20:03:43
  • Python2比较当前图片跟图库哪个图片相似的方法示例

    2021-05-22 09:51:22
  • 详解NodeJS框架express的路径映射(路由)功能及控制

    2024-05-11 10:23:07
  • asp之家 网络编程 m.aspxhome.com