当前位置: 首页 > article >正文

Vue组件通信

1.props通信

        父传子
//父组件
<Child  :passValue="value">
//子组件
defineProps(['passValue'])    //接收
        子传父
//父组件
<Child  :sendValue="getValue">
function getValue(value){ ... }    //获取函数接收值
//子组件
<... @click="sendValue(value)"
defineProps(['sendValue'])    //传出函数

2.自定义事件传参

        子传父
//父组件
<Child  @sendValue="getValue">    //子组件执行时调用sendValue
function getValue(value){ ... }    //获取函数接收值
//子组件
<... @click="emit('sendValue' , value)"
const emit = defineEmits(['sendValue'])    //声明传出函数

3.v-model

//父组件
<Child v-model="msg">
//子组件
<input v-model = "model">
const model = defineModel()

4.provide-inject向后代传值

//父组件
import { provide } from "vue"
provide("abc",value)    //如果写x.value的话就不是响应式的了
//子组件
import { inject } from "vue"
let x = inject("abc")

//其他
inject("名" , "默认值") //inject可以加默认值


http://www.kler.cn/a/274003.html

相关文章:

  • Unity开发游戏使用XLua的基础
  • Leetcode面试高频题分类刷题总结
  • 014-STM32单片机实现矩阵薄膜键盘设计
  • 第一个Qt开发实例(一个Push Button按钮和两个Label)【包括如何在QtCreator中创建新工程、代码详解、编译、环境变量配置、测试程序运行等】
  • Spring Security(maven项目) 3.0.3.0版本
  • 扩展域并查集 带权并查集
  • Python高级语法
  • Spring--拦截器与过滤器
  • 机器人学习书籍
  • Wifi环境下Unity开发iOS应用启动后HTTPS请求未弹出是否允许无线数据使用数据的弹窗
  • C语言 扫雷游戏
  • Python之Web开发中级教程----Django站点管理
  • 【C语言】C语言内存函数
  • 防火墙的原理和配置
  • 《计算机视觉中的深度学习》之目标检测算法原理
  • JAVA八股day1
  • Re62:读论文 GPT-2 Language Models are Unsupervised Multitask Learners
  • 手机备忘录怎么导出到电脑,如何将手机备忘录导出到电脑
  • 性能测试-Jmeter常用元件基础使用
  • 【每日一问】手机如何开启USB调试?
  • elment-ui el-tabs组件 每次点击后 created方法都会执行2次
  • 【四 (4)数据可视化之 Ploty Express常用图表及代码实现 】
  • 数据库中DQL、DML、DDL、DCL的概念与区别
  • LightDB24.1 Sequence支持设置minvalue小于INT64_MIN
  • 生成式人工智能如何改变商业和社会
  • layuiAdmin-通用型后台模板框架【广泛用于各类管理平台】