购物网站哪个最便宜,centos7 wordpress,小程序开发源码,wordpress 地区联动【Vue3】组件通信之v-model 背景简介开发环境开发步骤及源码总结 背景
随着年龄的增长#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来#xff0c;技术出身的人总是很难放下一些执念#xff0c;遂将这些知识整理成文#xff0c;以纪念曾经努力学习奋斗的… 【Vue3】组件通信之v-model 背景简介开发环境开发步骤及源码总结 背景
随着年龄的增长很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来技术出身的人总是很难放下一些执念遂将这些知识整理成文以纪念曾经努力学习奋斗的日子。本文内容并非完全原创大多是参考其他文章资料整理所得感谢每位技术人的开源精神。
简介
本文介绍 Vue3 中如何使用 v-model 实现组件间通信即组件间相互传数据。
Vue3 中组件间通信包括
父组件向子组件传数据实现方案有 propsv-model$ref默认插槽 / 具名插槽 子组件向父组件传数据 propsv-model$parent自定义事件作用域插槽 父组件向子组件的子组件传数据即向孙子组件传数据 $attrsprovider inject 任意组件间传数据 mittPinia
开发环境
分类名称版本操作系统WindowsWindows 11IDEVisual Studio Code1.91.1
开发步骤及源码
1 创建 Vue3 工程参考【Vue3】工程创建及目录说明。
2 删除 src 目录下 assets 和 components 目录。
3 修改 src 目录下 main.ts。
import { createApp } from vue
import App from ./App.vuecreateApp(App).mount(#app)4 定义子组件接收来自父组件的数据。
templatediv classcontenth1子组件/h1span用户名/spaninput typetext :valuemodelValueinputemits(update:modelValue, (HTMLInputElement$event.target).value) //div
/templatescript setup langts
defineProps([modelValue])
const emits defineEmits([update:modelValue])
/scriptstyle scoped langscss
.content {background-color: greenyellow;padding: 20px;input {border: 3px solid red;height: 30px;line-height: 30px;width: 300px;}
}
/style父组件通过 v-model 向子组件传数据Vue3 框架默认 v-model 传的数据名为 modelValue对应事件名为 update:modelValue所以子组件需要使用 defineProps 函数声明接收来自父组件的数据 modelValue使用 defineEmits 函数声明接收来自父组件的事件 update:modelValue。 触发事件函数的参数是 $event.target.value即子组件中 DOMinput事件对象的值。 注意需要执行 npm install -D sass 命令安装 CSS 预处理器。
5 修改 Vue 根组件 src/App.vue使用 v-model 向子组件传数据。
templatediv classparentLogin v-modelusername //div
/templatescript setup langts
import Login from ./components/Login.vue
import { ref, watch } from vueconst username ref(administrator)
watch(username, (newValue, oldValue) {console.log(username changed from, oldValue, to, newValue)
})
/scriptstyle scoped langscss
.parent {background-color: orange;padding: 20px;
}
/style以上代码中 Login v-modelusername / 等同于 Login :modelValueusername update:modelValueusername $event /后者为 v-model 的本质。
6 执行命令 npm run dev 启动应用浏览器访问http://localhost:5173/。 页面初始化时 input 框内显示来自父组件的数据 administrator每次修改 input 框中数据控制台便会打印出数据变化日志此日志为 App.vue 打印的表明父组件也收到了子组件传来的修改后的变更数据。
7 Vue3 默认 v-model 数据名是 modelValue此名称可以自定义。自定义 v-model 数据名便于在同一组件标签上使用多个 v-model 属性传数据修改 App.vue 向子组件传两个数据。
templatediv classparentLogin v-model:accountusername v-model:credentialpassword //div
/templatescript setup langts
import Login from ./components/Login.vue
import { ref, watch } from vueconst username ref(administrator)
const password ref(00000000)
watch([username, password], (newValue, oldValue) {console.log(username changed from, oldValue, to, newValue)
})
/scriptstyle scoped langscss
.parent {background-color: orange;padding: 20px;
}
/style8 修改子组件声明接收父组件的两个数据并进行处理。
templatediv classcontenth1子组件/h1span用户名/spaninput typetext :valueaccountinputemits(update:account, (HTMLInputElement$event.target).value) /span密码/spaninput typetext :valuecredentialinputemits(update:credential, (HTMLInputElement$event.target).value) //div
/templatescript setup langts
defineProps([account, credential])
const emits defineEmits([update:account, update:credential])
/scriptstyle scoped langscss
.content {background-color: greenyellow;padding: 20px;input {border: 3px solid red;height: 30px;line-height: 30px;margin-right: 20px;width: 300px;}
}
/style9 浏览器刷新访问http://localhost:5173/页面初始化时 input 框内显示来自父组件的数据 administrator 和 00000000每次修改 input 框中数据控制台便会打印出数据变化日志此日志为 App.vue 打印的表明父组件也收到了子组件传来的修改后的变更数据。
总结
使用 v-model 实现组件间通信的方法常用于封装自定义 UI 组件库在日常业务开发过程中较少使用使用 v-model 实现组件间通信的底层原理是动态 value input 事件父组件需要在子组件标签上通过 v-model 属性标识所传的数据子组件需要使用 defineProps 函数声明接收父组件的数据使用 defineEmits 函数声明接收父组件数据对应的事件v-model 默认传的数据名为 modelValue对应事件名为 update:modelValue。数据名可自定义格式v-model:自定义数据名事件名前缀固定为 update:格式update:自定义数据名。
