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通过由点(.) ...
随机推荐
- Static关键字的使用
Static关键字的使用 static关键字的作用: 用来修饰成员变量和方法,被修饰的成员是属于类的,而不单单是属于某个对象的,也就是说,可以不靠对象来调用. 首先我们来介绍类变量 当static修饰 ...
- CISSP 考试经验分享
复习资料: <Eleventh Hour CISSP> <汇哲培训讲义> <CISSP Official Security Professional>Eighth ...
- Ethical Hacking - NETWORK PENETRATION TESTING(16)
ARP Poisoning - MITMf MITMf is a framework that allows us to launch a number of MITM attacks. MITMf ...
- Vue使用定时器定时刷新页面
1. 需求说明 在前端开发中,往往会遇到页面需要实时刷新数据的情况,给用户最新的数据展示. 2. 逻辑分析 如果需要数据实时更新,我们自然是需要使用定时器,不断的调用接口数据,会相对的消耗内存. 3. ...
- 微型计算机系统实验总结(学习性实验:IO地址译码,可编程并行接口8255,交通灯控制实验 + 自主设计实验:汽车信号灯控制系统,电风扇控制器,洗衣机控制系统,霓虹灯,电梯控制系统)
实验配套软件: https://download.csdn.net/download/qq_39932172/11221584 实验指导用书: 教师版: https://download.csdn.n ...
- Alink漫谈(十四) :多层感知机 之 总体架构
Alink漫谈(十四) :多层感知机 之 总体架构 目录 Alink漫谈(十四) :多层感知机 之 总体架构 0x00 摘要 0x01 背景概念 1.1 前馈神经网络 1.2 反向传播 1.3 代价函 ...
- 部署SpringBoot到阿里云
目录 安装Mysql 1. 下载命令 2. 进行repo的安装: 3. 安装mysql 部署SpringBoot到阿里云服务器 1.IDEA下载插件 2.进入 Preference 配置一个 Acce ...
- Arch Linux, 无法启动进入sddm登录
启动Arch Linux 的时候全屏就一个错误"Failed to start Load/Save Screen Backlight Brightness of backlight:acpi ...
- 不使用字体图标和图片,只使用css如何做出展开收起的效果
<i class="iconArrow" :class="[ littleNavState === item.meta.id ? 'arrowOpen' : '' ...
- 《闲扯Redis九》Redis五种数据类型之Set型
一.前言 Redis 提供了5种数据类型:String(字符串).Hash(哈希).List(列表).Set(集合).Zset(有序集合),理解每种数据类型的特点对于redis的开发和运维非常重要. ...