Vue 修饰符sync的应用
官方链接
- https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符
- 这个解释有点不太直观,用代码解释一下
父组件 v-bind:msg.sync="testMsg"
<template>
<div>
<bizComponent v-bind:msg.sync="testMsg"></bizComponent>
</div>
</template>
<script>
import bizComponent from './bizComponent'
export default {
components:{bizComponent
}
data: function () {
return {
testMsg: 'Hello origin testMsg'
};
}
}
</script>
子组件: 子组件可以在任意methods或者生命周期中直接修改props的值
- 第一个参数形式 [update:propName]. 这是Vue的机制
- 第二个参数内容: 修改后内容传回父组件
- 这种形式不需要在父组件中实现赋值方法
- this.$emit('update:msg', 'Hello Changed message')
<template>
<div>
<div class="box-later-1">prop msg is: {{msg}}</div>
<el-button type="danger" v-on:click="handleClick">change</el-button>
</div>
</template>
<script>
export default {
props: {
msg: {type: String}
},
data: function () {
return {};
},
methods: {
handleClick() {
// 第一个参数形式 [update:propName]. 这是Vue的机制
// 第二个参数内容: 修改后内容传回父组件
// 这种形式不需要在父组件中实现赋值方法
this.$emit('update:msg', 'Hello Changed message')
}
},
}
</script>
Vue 修饰符sync的应用的更多相关文章
- 理解vue 修饰符sync
也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...
- 深入理解vue 修饰符sync
[ vue sync修饰符示例] 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 ...
- 深入理解vue 修饰符sync【 vue sync修饰符示例】
在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...
- vue 修饰符sync
从 Vue 2.3.0 起,重新引入了 .sync 修饰符,作为一个编译时的语法糖存在.它会被扩展为一个自动更新父组件属性的 v-on 监听器. 实例: 父组件:<syTree :refillD ...
- Vue修饰符
为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫 ...
- 事件&vue修饰符
JavaScript 事件 HTML事件是发生在HTML元素上的事情.当在HTML页面帐使用JavaScript时,javascript可以触发这些事件 HTML 事件 HTML事件可以是浏览器的行为 ...
- Vue 修饰符once的方法使用
once:只执行一次 代码: <!doctype html> <html lang="en"> <head> <meta charset= ...
- vue 修饰符 整理
事件修饰符 .stop <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> .preven ...
- vue 修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通过由点(.) ...
随机推荐
- Python Ethical Hacking - WEB PENETRATION TESTING(3)
CRAWLING SUMMARY Our crawler so far can guess: Subdomains. Directories. Files. Advantages: ->Disc ...
- P1776 宝物筛选
题目: 正文: 啊,多重背包真恶心... 一开始我是把多重背包改成了01背包,然鹅我当时是直接1个1个的往后摞的... 参见以下代码: for(int i=1;i<=n;++i){//平平无奇的 ...
- 【原创】linux设备模型之kset/kobj/ktype分析
背 景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本 ...
- 【JVM之内存与垃圾回收篇】方法区
方法区 前言 这次所讲述的是运行时数据区的最后一个部分 从线程共享与否的角度来看 ThreadLocal:如何保证多个线程在并发环境下的安全性?典型应用就是数据库连接管理,以及会话管理 栈.堆.方法区 ...
- Oracle常见错误以及解决方法
前言: 本博客为博主在开发中遇到的问题,为大家提供解决方法,如需转载,请注明来源,谢谢! 问题一: 第一次用PLSQL Developer连接数据库,若用sys用户登录并操作则正常,若用普通用户比如x ...
- js判断字符串中是否包含特殊字符、中文
/** * @author:xc * @desc: 特殊字符校验 除了下划线 */ containSpecial(str) { var containSpecial = RegExp( /[(\ )( ...
- sqlite文件的建立和as的应用,
建立目录D:\android_projects\qrscan\app\src\main\assets把数据库文件d:\sqlite_files\device.db 拷贝到 D:\android_pro ...
- zabbix修改默认密码
1.mysql -u root -p 2.desc users; 3.select userid,alias,passwd from users; 4.update users set passwd= ...
- Android集成Zxing
1.在build文件中添加依赖 dependencies { //ZXing implementation 'com.google.zxing:core:3.3.3' implementation(' ...
- Spring学习之Spring中AOP方式切入声明式事务
mybatis-spring官方文档说明 一个使用 MyBatis-Spring 的其中一个主要原因是它允许 MyBatis 参与到 Spring 的事务管理中.而不是给 MyBatis 创建一个新的 ...