首页 > 其他分享 >Vue - 组件通信(父子单向传递、父子相互传递、祖孙隔代传递)

Vue - 组件通信(父子单向传递、父子相互传递、祖孙隔代传递)

时间:2024-01-19 17:22:41浏览次数:23  
标签:父子 Vue 自定义 触发 单向 param 传递 组件

父组件向子组件单向传递

  1. 父组件:引入子组件后,通过属性绑定的形式,将值传入子组件;

`

`
  1. 子组件:子组件通过props接收父组件传入的值;
    `
`

子组件向父组件单向传递

  1. 父组件:引入子组件后,自定义一个用来处理自定义事件的方法,接收子组件传递的值;
    `
`
  1. 子组件:子组件通过$emit触发自定义事件,将值传递给父组件;
    `
`

父组件和子组件相互传递

  1. 通过自定义函数的方式
    ①. 父组件:
    `
`

②. 子组件:
`

`
  1. 使用.sync进行双向绑定: 是“v-on:update:参数名”的简化写法
    ①. 父组件:
    `
`

②. 子组件:使用$emit('update:param');
`

`

爷组件和孙组件隔代传递

  1. 适用于vue2.4.0版本以上:
    ①. 爷组件:定义处理值的自定义函数 和 接收孙组件传递过来的值的参数,同时将此值传递到孙组件;
    `
`

②. 父组件:使用“$attrs.参数名”获取父组件中除了prop传递的属性、class、style的属性;“v-on='$listeners'”获取作用在这个组件上的所有监听器;
<template> <div> <son :param="$attrs.param" v-on="$listeners"></father> </div> </template>
③. 孙组件:通过props获取父组件传递的值;$emit('方法名', 需要传递的参数) 来触发自定义函数并传递值;
`

`

标签:父子,Vue,自定义,触发,单向,param,传递,组件
From: https://www.cnblogs.com/amass-fortunes/p/17975109

相关文章

  • vue validator 扩展
    ElementUIForm1.问题:有个表单里面是表格,可以提交多行数据,每一行都有计划数ItemCount需要校验,校验标准是与同一行的另一个输入框Inventory的值比较,如果ItemCount>Inventory就要有tip提示,不能用弹出框参考官网的例子密码的二次验证,但我这里又不同,我是有多行验证的,我需要传参......
  • 解决前端传递日期参数后端接收报错问题
    当controller中的方法直接用参数接收前端传递的参数时日期格式不匹配会报如下错误:Failedtoconvertvalueoftype'java.lang.String'torequiredtype'java.util.Date';,就是说类型转换异常@PostMapping("/1")publicStringdoSign1(LonguserId,DatesignDate){S......
  • 第32节: Vue3 方法处理程序
    在UniApp中使用Vue3框架时,你可以使用方法处理程序来定义在模板中调用的自定义函数。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用方法处理程序:<template><view><button@click="handleClick">Clickme</button><p>{{message}}</p></view><......
  • 第31节: Vue3 内联处理程序
    在UniApp中使用Vue3框架时,你可以使用内联处理程序来直接在模板中编写JavaScript代码。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用内联处理程序:<template><view><button@click="handleClick">Clickme</button><p>{{message}}</p></view>......
  • 第30节: Vue3 监听事件
    在UniApp中使用Vue3框架时,你可以使用监听事件来响应用户的操作。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用监听事件:<template><view><button@click="handleClick">Clickme</button></view></template><scriptsetup>import{......
  • 第29节: Vue3 列表渲染
    在UniApp中使用Vue3框架时,你可以使用列表渲染语法来动态地渲染一个列表。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用列表渲染:<template><view><button@click="addItem">AddItem</button><ul><liv-for="(item,index)initems":......
  • 第28节: Vue3 条件渲染
    在UniApp中使用Vue3框架时,你可以使用条件渲染来根据条件动态地显示或隐藏元素。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用条件渲染:<template><view><button@click="toggleActive">ToggleActive</button><pv-if="isActive">Thisisactive</p......
  • 第26节: Vue3 绑定到对象
    在UniApp中使用Vue3框架时,你可以使用对象绑定语法将属性绑定到对象上。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用绑定到对象:<template><view><button@click="toggleActive">ToggleActive</button><div:style="{color:activeColor,fontWeight:......
  • 基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统
    Tansci-Boot基于SpringBoot2+magic-api+Vue3+ElementPlus+amis3.0快速开发管理系统Tansci-Boot是一个前后端分离后台管理系统,前端集成amis低代码前端框架,后端集成magic-api的接口快速开发框架。包含基础权限、安全认证、以及常用的一些组件功能。项目......
  • Vue3 Diff算法之最长递增子序列,学不会来砍我!
    专栏分享:vue2源码专栏,vue3源码专栏,vuerouter源码专栏,玩具项目专栏,硬核......