深入理解vue 修饰符sync
【 vue sync修饰符示例】
示例代码如下:
<comp :foo.sync="bar"></comp>
会被扩展为:
<comp :foo="bar" @update:foo="val => bar = val"></comp>
当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:
this.$emit('update:foo', newValue)
猛一看不明白,下边我么通过一个实例(弹窗的关闭事件)来说明这个代码到底是怎么运用的。
<template>
<div class="details">
<myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
template: `<div v-if="show">
<p>默认初始值是{{show}},所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>`,
props:['show'],
methods: {
closeDiv() {
this.$emit('update:show', false); //触发 input 事件,并传入新值
}
}
})
export default{
data(){
return{
valueChild:true,
}
},
methods:{
changeValue(){
this.valueChild = !this.valueChild
}
}
}
</script>
动态效果如下:
vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。如果我们不用.sync,我们想做上面的那个弹窗功能,我们也可以props传初始值,然后事件监听,实现起来也不算复杂。这里用sync实现,只是给大家提供一个思路,让其明白他的实现原理,可能有其它复杂的功能适用sync。
这只是一个简单的例子,看完这个不知你是不觉得有个指令跟这个很相似,v-model?对,就是v-model在组件上使用的时候。
具体的可以查看:vue 自定义组件使用v-model,可以实现同样的功能。也是以这个弹窗事件做演示的
深入理解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 中移除了 .sync .但是在 2.0 发 ...
- vue 修饰符sync
从 Vue 2.3.0 起,重新引入了 .sync 修饰符,作为一个编译时的语法糖存在.它会被扩展为一个自动更新父组件属性的 v-on 监听器. 实例: 父组件:<syTree :refillD ...
- Vue 修饰符sync的应用
官方链接 https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符 这个解释有点不太直观,用代码解释一下 父组件 v-b ...
- 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通过由点(.) ...
随机推荐
- ABAP开发常用函数
1. LAST_DAY_OF_MONTHS——用于获取某月的最后一天. 例如输日今天的日期2013/10/16,系统将回执成2013年10月的最后一天,也就是2013/10/30 2. CONVE ...
- 字体Lucida Console
曾经有个段子说的是,一眼能认出黑客的原因就是因为对方在使用黑屏荧光字加Lucida Console其实这正说明了Lucida Console在终端使用的受欢迎程度.Lucida Console也是英文 ...
- 精通CSS:高级Web标准解决方案(第二版) 初读笔记
2.1 常用的选择器 1. 类型选择器 p { color: black; } 2. 后代选择器 blockquote p { padding-left: 2em; } 3. ID选择器 #in ...
- windows 快捷键 部分
1.快速启动任务栏锁定的任务 WIN+任务栏任务顺序(左侧开始数) 2.运行 WIN+R mstsc--->远程桌面链接 regedit--->注册表信息 services.msc---& ...
- java:(九大内置对象,计算服务器访问次数,filter过滤器,MVC框架,MVC和三层架构的关系)
1.九大内置对象: <%@ page language="java" import="java.util.*" pageEncoding="UT ...
- Python基础知识思维导图|自学Python指南
微信公众号[软件测试大本营]回复"python",获取50本python精华电子书. 测试/开发知识干货,互联网职场,程序员成长崛起,终身学习. 现在最火的编程语言是什么?答案就是 ...
- LeetCode.1005-K次取负数组和最大(Maximize Sum Of Array After K Negations)
这是悦乐书的第376次更新,第403篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第237题(顺位题号是1005).给定一个整数数组A,我们必须按以下方式修改数组:我们选 ...
- mysql默认的存储引擎是什么?它们的区别有哪些?mysql中索引有哪些?
1.mysql默认引擎 mysql-5.1版本之前默认引擎是MyISAM,之后是innoDB 2.关系 MyISAM是非集聚引擎,支持全文索引;不支持事务;它是表级锁;会保存表的具体行数. innoD ...
- 车牌识别1:License Plate Detection and Recognition in Unconstrained Scenarios阅读笔记
一.WHAT 论文下载地址:License Plate Detection and Recognition in Unconstrained Scenarios [pdf] github 的项目地址: ...
- Vue中使用fullpage.js
Vue中使用fullpage.js:https://blog.csdn.net/weixin_34184158/article/details/88672739