官方链接

父组件 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的应用的更多相关文章

  1. 理解vue 修饰符sync

    也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...

  2. 深入理解vue 修饰符sync

    [ vue sync修饰符示例] 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 ...

  3. 深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...

  4. vue 修饰符sync

    从 Vue 2.3.0 起,重新引入了 .sync 修饰符,作为一个编译时的语法糖存在.它会被扩展为一个自动更新父组件属性的 v-on 监听器. 实例: 父组件:<syTree :refillD ...

  5. Vue修饰符

    为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫 ...

  6. 事件&vue修饰符

    JavaScript 事件 HTML事件是发生在HTML元素上的事情.当在HTML页面帐使用JavaScript时,javascript可以触发这些事件 HTML 事件 HTML事件可以是浏览器的行为 ...

  7. Vue 修饰符once的方法使用

    once:只执行一次 代码: <!doctype html> <html lang="en"> <head> <meta charset= ...

  8. vue 修饰符 整理

    事件修饰符 .stop <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> .preven ...

  9. vue 修饰符

    Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通过由点(.) ...

随机推荐

  1. Static关键字的使用

    Static关键字的使用 static关键字的作用: 用来修饰成员变量和方法,被修饰的成员是属于类的,而不单单是属于某个对象的,也就是说,可以不靠对象来调用. 首先我们来介绍类变量 当static修饰 ...

  2. CISSP 考试经验分享

    复习资料: <Eleventh Hour CISSP> <汇哲培训讲义> <CISSP Official Security Professional>Eighth ...

  3. Ethical Hacking - NETWORK PENETRATION TESTING(16)

    ARP Poisoning - MITMf MITMf is a framework that allows us to launch a number of MITM attacks. MITMf ...

  4. Vue使用定时器定时刷新页面

    1. 需求说明 在前端开发中,往往会遇到页面需要实时刷新数据的情况,给用户最新的数据展示. 2. 逻辑分析 如果需要数据实时更新,我们自然是需要使用定时器,不断的调用接口数据,会相对的消耗内存. 3. ...

  5. 微型计算机系统实验总结(学习性实验:IO地址译码,可编程并行接口8255,交通灯控制实验 + 自主设计实验:汽车信号灯控制系统,电风扇控制器,洗衣机控制系统,霓虹灯,电梯控制系统)

    实验配套软件: https://download.csdn.net/download/qq_39932172/11221584 实验指导用书: 教师版: https://download.csdn.n ...

  6. Alink漫谈(十四) :多层感知机 之 总体架构

    Alink漫谈(十四) :多层感知机 之 总体架构 目录 Alink漫谈(十四) :多层感知机 之 总体架构 0x00 摘要 0x01 背景概念 1.1 前馈神经网络 1.2 反向传播 1.3 代价函 ...

  7. 部署SpringBoot到阿里云

    目录 安装Mysql 1. 下载命令 2. 进行repo的安装: 3. 安装mysql 部署SpringBoot到阿里云服务器 1.IDEA下载插件 2.进入 Preference 配置一个 Acce ...

  8. Arch Linux, 无法启动进入sddm登录

    启动Arch Linux 的时候全屏就一个错误"Failed to start Load/Save Screen Backlight Brightness of backlight:acpi ...

  9. 不使用字体图标和图片,只使用css如何做出展开收起的效果

    <i class="iconArrow" :class="[ littleNavState === item.meta.id ? 'arrowOpen' : '' ...

  10. 《闲扯Redis九》Redis五种数据类型之Set型

    一.前言 Redis 提供了5种数据类型:String(字符串).Hash(哈希).List(列表).Set(集合).Zset(有序集合),理解每种数据类型的特点对于redis的开发和运维非常重要. ...