Vue组件通信

1.props通信

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

2.自定义事件传参

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

3.v-model

javascript 复制代码
//父组件
<Child v-model="msg">
//子组件
<input v-model = "model">
const model = defineModel()

4.provide-inject向后代传值

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

//其他
inject("名" , "默认值") //inject可以加默认值
相关推荐
恋猫de小郭15 分钟前
Flutter Widget IDE 预览新进展,开始推进落地发布
android·前端·flutter
jingling5551 小时前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
武昌库里写JAVA2 小时前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
Freedom风间6 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军7 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军7 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪7 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer7 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu7 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风8 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui