Vue 温故而知新 props如何双向属性绑定
2023-09-11 14:16:38 时间
传送门:https://cn.vuejs.org/v2/guide/components-custom-events.html
https://segmentfault.com/q/1010000012055834/a-1020000012055960
1、最单纯的做法:$emit 事件回调
// 父组件 <msgbox :god='title' @shift="fuck"></msgbox>
data () {
return {
title: '我是标题'
}
}, fuck (data) { this.title = fuck } // 子组件 <button @click='go'></button>
go () { this.$emit('shift', '你要更新的值'); }
(推荐)其实父组件如果只是赋值的话,可以写的更简洁一点。可以省略回调函数的定义和绑定。
// 父组件 <msgbox :god='title' @shift="title = $event"></msgbox> // 子组件 <button @click='go'></button>
go () { this.$emit('shift', '你要更新的值'); }
$event是内置变量,你甚至可以这样写:
<msgbox :god='title' @shift=" val => title = val""></msgbox>
2、官方推荐的做法: @update 状态更新事件
原理同1,我是看不出区别。主要是更加规范吧,看到这个就知道是双向属性更新了。同时也少了自定义事件名的烦恼。
// 父组件 <msgbox :god='title' @update:title="title = $event"></msgbox> // 子组件 <button @click='go'></button>
go () { this.$emit('update:title', '你要修改的值') }
3、我强烈推荐的做法:v-bind.sync
// 父组件,可以省略 @update 或者 @event
// 等同于:<msgbox :god='title' @update:title="title = $event"></msgbox>
<msgbox :god.sync='title'></msgbox>
// 子组件 <button @click='go'></button>
go () { this.$emit('update:title', '你要修改的值') }
相关文章
- vue-router篇
- 【记录】vue构建项目npm install错误run `npm audit fix` to fix them, or `npm audit` for details
- vue项目启动时将localhost替换成指定ip地址
- vue-cli3.0 脚手架搭建项目的过程详解
- vue.js3: i18n根据浏览器语言自动选择当前语言(vue@3.2.37 / vue-i18n@9.2.0-beta.36)
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- 【视频】vue 插值表达式之三元运算符的使用
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- Vue:插槽属性prop的使用示例
- 计算机毕设 SSM Vue大学生社团管理系统(含源码+论文)
- 前后端代码分离开发(Vue)
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Vue组件库新增的prop属性类型是Object或者Array时默认值的设置
- 169:vue+openlayers 根据多边形坐标,获取面积值
- Linux安装最新版Vue或者指定版本
- vue中计算属性和侦听属性
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- VUE之VUEX常见面试题大全汇总--史上最全【vuex面试题】
- Vue学习笔记——vue-router