vue3-父子组件传函数方法

最新推荐文章于 2024-05-17 08:00:00 发布

sunyeei

最新推荐文章于 2024-05-17 08:00:00 发布

阅读量647

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/sunyeei/article/details/133084230

版权

1.父子组件传值

逻辑代码和vue2大差不差，父传子可以通过props传值页面接受即可，子传父通过emit传值即可。

当然vue3还提供了依赖注入的跨组件传值方法，但是项目中出现过多的inject provide可能会导致维护不便且代码污染问题，所以笔者现在的项目是通过父子组件一层层传值得到的。

2.子传父内容为函数方法

父传子数值笔者上一篇文章已经介绍过了，有兴趣的可以移步 Vue3+element-plus项目开发小结（父子组件传值）_sunyeei的博客-CSDN博客s

传值为函数方法其实步骤也一样。

当前组件为index父组件，子组件就是其中的dialog弹窗

首先需要用到：绑定props，笔者项目中需要传的值是function函数传的projectId 和 projectName俩个值

在index注册这个ref的时候需要注意，如果是简单的字符串 ref（）即可，但是function函数就得箭头函数的方式去接收，ref（（x , y ）=>{x ; y }）

那么回到dialog子组件中又该如何传输当前dialog的值呢？

重点的格式在于：（x ， y ）=> Promise<void>

当然项目规定需要用到ts，所以需要提前定义一下类型

通过事件将form的值传出去，这里需要注意用props.需要的项

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sunyeei

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue3-父子组件传函数方法

vue3数据子传父一点就会＜（＾－＾）＞
复制链接

扫一扫

vue3父子组件传值.doc

02-05

本文将详细探讨Vue3中如何使用`setup`语法糖格式来实现父子组件的数据传递，包括`defineProps`和`defineEmits`这两个关键函数的用法。 ### 1. `defineProps`: 接收父组件传递的数据在Vue3中，父组件向子组件传递...

vue 进阶之实现父子组件间的传值

10-17

本篇文章主要探讨了如何在父子组件之间传递值，这是Vue开发中常见的需求。在Vue中，父子组件之间的通信主要通过props（属性）从父组件向子组件单向传递数据，以及通过事件（events）从子组件向父组件传递数据。 ...

1 条评论您还未登录，请先登录后发表或查看评论

vue3 组件间互相通信（包括父子、爷孙、兄弟、全局）

最新发布

码农研究僧的博客

05-17

1万+

在 Vue 3 中，父组件可以通过 props 向子组件传递数据子组件通过 defineProps 或 props 来定义它接收的属性这些属性在子组件中可以直接使用

vue3中，父子组件props传函数写法-传动态接口 & 特殊字符校验 & 封装公共input组件

weixin_44867717的博客

08-27

2392

【代码】vue3中，父子组件props传函数写法-传动态接口 & 特殊字符校验 & 封装公共input组件。

vue 父组件给子组件传递一个函数

潇湘子的博客

05-27

7666

vue 中父子组件通信的基本原理是：父组件通过props给子组件下发一个属性来传递数据，而子组件通过emit去向上触发父组件中的事件来达到相互通信的目的。当然还有其他的，这个暂不讨论。而props的数据类型可以是: props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise:

vue3.x 组件传递函数

天天的博客

12-12

2405

定义要传递的属性类型 2，传递属性 3，使用行，下一篇，我们将去测试emit 插槽啥的，都能搞定！

Vue element-ui父组件控制子组件的表单校验操作

10-15

总的来说，Vue Element-UI的父组件控制子组件的表单校验操作主要是通过`ref`属性创建子组件引用，然后在父组件中调用子组件的校验方法来实现的。子组件则通过`el-form`和`el-form-item`的`prop`属性来设置验证规则，...

vue3 子组件向父组件传递数据,函数

或非与博客

02-27

3417

父组件向子组件传递参数请看：父组件vue3 setup 父组件向子组件传递参数子组件 defineExpose（）暴露uid,name参数和sonToFather的方发 <script lang="ts" setup> import { ref,reactive} from 'vue' const sonToFather = (yourParam:string)=>{ console.log(yourParam+"子组件自定义的sonToFather()方发被执行了"...

vue3的父子组件传值

m0_71331177的博客

09-01

6273

vue3的父子组件传值案例

vue3.0 props组件传参

Mr_wuying的博客

10-15

2678

setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。 context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。 <script> import { toRefs } from 'vue' export default defineCompent({ props: { title: S.

Vue父组件向子组件传值

Rick的博客

08-30

199

父组件向子组件传值组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '这是父组件中的消息' }, components...

vue父组件向子组件传递函数方法

qq_34093387的博客

03-31

3960

父组件 <template> <div> parent <child :parentHandler="parentHandler" /> </div> </template> <script> import child from "@/components/child"; export default { components: { child }, data() { return {};

史上最详细的vue父子组件传参、传函数

九

07-07

1万+

首先要知道谁是父组件谁是子组件，这个概念分不清的话还这么传：子组件：自己写的组件，供其他页面调用父组件：自己写的组件被页面调用到了，页面内调用的组件就是父组件如果不够清晰，看图：一、父子组件传参数是通过属性props来实现的，需要在子组件内定义一个属性来接收父组件传过来的值；父组件要做的是双向绑定一个参数、给参数赋值。实例：先上图子组件： 1.要用brainstormData属性，此时属性是没有值的，父组件还没给它传值。 2.定义属性：brainstormData，.

vue 父组件给子组件传递一个函数，子组件调用父组件中的方法

yanby921005的博客

09-13

426

在父组件中，我们在子组件中给他绑定一个属性，而这个属性是一个函数。vue 中父子组件通信，props的数据类型可以是。在子组件中我们接收父组件传递过来的这个属性。

父组件把函数通过props传递给子组件执行

weixin_34417814的博客

08-10

3541

父组件传递回调函数给子组件，子组件把参数传回给父组件。父组件<template> <i-upload :success="uploadSuccess" :fail="uploadFail"></i-upload> </template> <script> import Upload from '@/components/uplo...

VUE 父组件通过函数向子组件传参

Red_sevenWord的博客

08-13

586

父组件 import multipleUpload from '@/components/multipleUpload' export default { components: {multipleUpload}, data () { return { option:{ title: '添加照片', maxNum: 10, icon: ''

vue2.0父子组件传递函数

09-01

在Vue2.0中，父子组件之间可以通过props属性和$emit方法进行函数的传递。首先，在父组件中，通过props属性将函数传递给子组件。在父组件中定义一个函数，然后将它添加到子组件的props中。例如： ```js // 父组件 <template> <div> <child-component :childFunction="parentFunction"></child-component> </div> </template> <script> export default { methods: { parentFunction() { // 在父组件中定义的函数 } } } </script> ``` 然后，在子组件中，通过this.$emit方法将其作为事件，从而调用父组件中的函数。在子组件中通过$emit方法触发一个事件，并将需要传递的参数传递给父组件中的函数。例如： ```js // 子组件 <template> <div> <button @click="childFunction">点击按钮</button> </div> </template> <script> export default { props: { childFunction: { type: Function, required: true } }, methods: { childFunction() { this.$emit('child-function'); } } } </script> ``` 最后，在父组件中，监听子组件的事件，并调用相应的处理函数。在父组件中通过v-on指令监听子组件触发的事件，并在相应的处理函数中调用父组件本身的函数。例如： ```js // 父组件 <template> <div> <child-component :childFunction="parentFunction" @child-function="handleChildFunction"></child-component> </div> </template> <script> export default { methods: { parentFunction() { // 在父组件中定义的函数 }, handleChildFunction() { // 处理子组件触发的事件 } } } </script> ``` 通过上述的方式，就可以在Vue2.0中实现父子组件之间的函数传递。