Vue3.0 自定义v-model:xxx

父组件

<ChildComponent v-model:title="pageTitle" />

子组件

export default {props: {title: String},emits: ['update:title'],methods: {changePageTitle(title) {this.$emit('update:title', titleChild)}}
}

可以看到父组件v-model后面的title在子组件的props、emits和$emit里面需要保持一致。
其实这些官网都有，下面重点讲一下setup中的。
父组件

<ChildComponent v-model:title="pageTitle" />

子组件

export default {props: {title: String},emits: ['update:title'],setup(){const titleChild = ref<string>('')emit('update:title',titleChild)return {titleChild}}
}

这种情况只触发了一次update:title，但是你会发现你titleChild在子组件改变，父组件也会发生改变。
父组件

<ChildComponent v-model:title="pageTitle" />

子组件

export default {props: {title: String},emits: ['update:title'],setup(){const titleChild = ref<string>('')updateTitle = ()=>{emit('update:title',titleChild.value)}return {titleChild}}
}

这里是触发一次updateTitle，会传递一次值给父组件。如果emit('update:title',titleChild.value)改为emit('update:title',titleChild)，只要触发一次updateTitle，后面titleChild改变父组件就会同步改变。
造成这种情况的原因是因为ref(’’)的proxy对象。

Vue3.0 自定义v-model:xxx相关推荐

html任务3 模拟滚动条,vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...
/** * @Desc Vue3.0虚拟滚动条组件V3Scroll * @Time andy by 2021-01 * @About Q:282310962 wx:xy190310*/ props: ...
Vue3.0实现原生高度可自定义菜单组件vue3-menus
vue3-menus Vue3.0 自定义右键菜单 Vue3.0 原生实现完全自定义右键菜单组件, 零依赖,可根据可视区域自动调节显示位置,可支持插槽完全重写每一项菜单项目地址 GitHub Git ...
vue3.0 php,使用Vue3.0收获的知识点（一）
前端发展百花放,一技未熟百技出. 茫然不知何下手,关注小编胜百书. 近期工作感觉很忙,都没有多少时间去写文章,今天这篇文章主要是将自己前期学习Vue3.0时候整理的一些笔记内容进行了汇总,通过对本文的 ...
vue3.0+vant3仿快手/抖音短视频|Vue3+Vite2聊天/直播实例
vue3.0-douyin 基于vue3.x开发仿抖音app界面小视频+直播聊天实例. 基于Vue3框架技术搭建一款仿抖音APP界面小视频+直播实战案例.运用到了vite2+vue3.0.5+vuex ...
vue3.0 安卓和ios h5 移动端音频自定义圆环可拖拽播放（兼容微信浏览器）
安装 npm install weixin-js-sdk 引入 import wx from 'weixin-js-sdk' <template> <div class=" ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P001-050]
视频链接:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili P1-50:当前页面. P51-100:尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + ...
Vue3.0尚硅谷（讲师：张天禹）视频学习笔记
一.创建Vue3.0工程 1.使用vue-cli创建官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create ...
Vue3.0快速入门
一.安装 1. cdn <script src="https://unpkg.com/vue@next"></script> 2. npm $npm ins ...

Vue3.0 自定义v-model:xxx

Vue3.0 自定义v-model:xxx相关推荐

最新文章

热门文章