当前位置: 首页 > 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

相关文章:

  • 用户界面的UML建模10
  • 计算机的错误计算(二百零一)
  • 记录一次线上因kafka宕机而导致java服务cpu飙升的情况
  • HTML——75. 内联框架
  • Uncaught ReferenceError: __VUE_HMR_RUNTIME__ is not defined
  • 1.1.1 认识时间复杂度
  • 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-通用型后台模板框架【广泛用于各类管理平台】