sync 简单实现 父子组件的双向绑定
这里主要是对vue文档中的sync进行一个再解释：
如果自己尝试的话，最好在已经使用emit 和prop实现了双向绑定的组件中尝试，以免出现不必要的错误；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js" ></script>
<div id="app">
<child v-bind:setname="name" v-on:update:setname="getNewName"></child>
你的名字：{{name}}
</div>
<script>
Vue.component('child',{
props: ['name'],
data: function(){
return {
newName: this.name
}
},
template:'<input type="text" @keyup="changeName" v-model="newName" />',
methods: {
changeName: function(){
this.$emit('update:setname',this.newName);
}
}
});
new Vue({
el:'#app',
data: {
name:'Jhon'
},
methods:{
getNewName: function(newName){
this.name = newName;
}
}
});
</script>
</html>
第一步：将子组件的emit事件修改为update形式
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。
这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。
this.$emit('update:title', newTitle)
emit都知道是子组件向父组件派发事件； 从 update:myPropName 我们可以得知 update：后的值是不固定的；
第二步： 改变父组件的v-bind
然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如：
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
在父组件中，v-bind:后的值title也是不固定的，而=后的“doc.title”则是父组件中存在的本地数据
为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：
<text-document v-bind:title.sync="doc.title"></text-document>
简写
注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。
如果子组件派发出来的事件，需要经过表达式的改写（如 取反之类的）都无法使用sync； 你可以使用比较好用的 emit 和prop来实现双向绑定
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js" ></script>
<div id="app">
<child :setname.sync="name"></child>
你的名字：{{name}}
</div>
<script>
Vue.component('child',{
props: ['name'],
data: function(){
return {
newName: this.name
}
},
template:'<input type="text" @keyup="changeName" v-model="newName"/>',
methods: {
changeName: function(e){
this.$emit('update:setname',this.newName);
}
}
});
new Vue({
el:'#app',
data: {
name:'Jhon'
},
methods:{
getNewName: function(newName){
this.name = newName;
}
}
});
</script>
sync 简单实现 父子组件的双向绑定的更多相关文章
- Vue父子组件数据双向绑定，子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
- Vue的父子组件v-model双向绑定，父组件修改子组件中绑定的v-model属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
- vue 父子组件数据双向绑定
父组件 <find-search v-model="searchshow"></find-search> 子组件 props: { value: { typ ...
- [vue]实现父子组件数据双向绑定
参考: http://www.cnblogs.com/xxcanghai/p/6124699.html <!DOCTYPE html> <html lang="en&quo ...
- vue 利用v-model实现父子组件数据双向绑定
v-model父组件写法: v-model子组件写法: 子组件export default中的model:{}里面两个值,prop代表着我要和props的那个变量相对应,event表示着事件,我触发事 ...
- 7.vue组件(二)--双向绑定,父子组件访问
本文主要说两件事 1. 如何实现父子组件之间的双向绑定 2. 父组件如何访问子组件的data,method, 子组件如何访问父组件的data,method等 一. 如何实现父子组件之间的双向绑定 案例 ...
- 如何在Vue2中实现组件props双向绑定
Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...
- ionic3.x angular4.x ng4.x 自定义组件component双向绑定之自定义计数器
本文主要示例在ionic3.x环境下实现一个自定义计数器,实现后最终效果如图: 1.使用命令创建一个component ionic g component CounterInput 类似的命令还有: ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
随机推荐
- shell 编程生成日期文件;Server虚拟机上进行Web服务器配置
shell 编程生成日期文件 1． 请编写一个脚本,命名为sh01.sh,其功能是: 键盘输入文件名(要求使用名字全拼作为文件名). 自动创建3个文件. 1个为系统当天日期(CCYYMMDD). 1个 ...
- 函数式编程—函数的关系—is-a、has-a、use-a
is-a:函数的实现与函数类型的关系: has-a:匿名(闭包)函数的创建者与匿名函数的关系:匿名函数与环境和上下文(函数)的关系: use-a:高阶函数与参量函数的关系: 函数式编程的基本功之一就是 ...
- （知识点4）C++ 中vector
1.定义vector<vector<int>> M; 2.添加元素这里是vector的嵌套使用,本质是vector元素里的每个元素也是vector类型,所以抓住本质来添加元素就 ...
- javaScript 迭代器
for ...of 语句 "use strict"; var name = ['a','b','c']; var mark = [1, 2, 3]; for(var i of na ...
- AtCoder Beginner Contest 137 F
AtCoder Beginner Contest 137 F 数论鬼题(虽然不算特别数论) 希望你在浏览这篇题解前已经知道了费马小定理 利用用费马小定理构造函数\(g(x)=(x-i)^{P-1}\) ...
- 冰多多团队-第六次Scrum会议
冰多多团队-第六次Scrum会议 工作情况 团队成员 已完成任务 待完成任务 zpj ASR bug修复 接入IAT模块 牛雅哲 完成语音识别->词典->termux的接口设计,熟悉了语法 ...
- SpringMVC(十六)：如何使用编程方式替代/WEB-INF/web.xml中的配置信息
在构建springmvc+mybatis项目时,更常用的方式是采用web.xml来配置,而且一般情况下会在web.xml中使用ContextLoaderListener加载applicationCon ...
- TermKit的新一代Mac终端，在Ubuntu 11.04 轻松安装TermKit
作为开发人员的必备工具,终端程序却一直没有什么大的变化,TermKit旨在改变这一切,作为下一代的命令行/终端程序,TermKit为我们提供了一个图形化的终端/命令行程序,它可以以可视化的方式展示终端 ...
- C# xml转化为类集合
XmlDocument doc = new XmlDocument(); doc.Load(HttpContext.Current.Server.MapPath("~/WebConfig/w ...
- Qt 组合框QComboBox的定制
转载:https://www.cnblogs.com/csuftzzk/p/qss_combobox.html 转载:https://www.bbsmax.com/A/E35pLgRK5v/ 转载:h ...