这里主要是对vue文档中的sync进行一个再解释：

如果自己尝试的话，最好在已经使用emit 和prop实现了双向绑定的组件中尝试，以免出现不必要的错误；

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <title></title>
  7.         <style type="text/css">
  8.         </style>
  9.     </head>
  10.     <body>
  11.     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js" ></script>
  12.     <div id="app">
  13.     　　<child v-bind:setname="name" v-on:update:setname="getNewName"></child>
  14.         你的名字：{{name}}
  15.     </div>
  16.     <script>
  17.     Vue.component('child',{
  18.         props: ['name'],
  19.         data: function(){
  20.             return {
  21.             newName: this.name
  22.                 }
  23.         },
  24.         template:'<input type="text" @keyup="changeName" v-model="newName" />',
  25.         methods: {
  26.         changeName: function(){
  27.             this.$emit('update:setname',this.newName);
  28.                 }
  29.         }
  30.     });
  31.     new Vue({
  32.         el:'#app',
  33.         data: {
  34.                 name:'Jhon'
  35.         },
  36.         methods:{
  37.         getNewName: function(newName){
  38.             this.name = newName;
  39.                 }
  40.         }
  41.     });
  42.     </script>
  43. </html>

第一步：将子组件的emit事件修改为update形式

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。

  1. this.$emit('update:title', newTitle)
    emit都知道是子组件向父组件派发事件； 从 update:myPropName 我们可以得知 update：后的值是不固定的；

第二步： 改变父组件的v-bind

然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如：

  1. <text-document
  2.   v-bind:title="doc.title"
  3.   v-on:update:title="doc.title = $event"
  4. ></text-document>
    在父组件中，v-bind:后的值title也是不固定的，而=后的“doc.title”则是父组件中存在的本地数据

为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：

  1. <text-document v-bind:title.sync="doc.title"></text-document>
    简写

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。

如果子组件派发出来的事件，需要经过表达式的改写（如 取反之类的）都无法使用sync； 你可以使用比较好用的 emit 和prop来实现双向绑定

  1.     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js" ></script>
  2.     <div id="app">
  3.             <child :setname.sync="name"></child>
  4.         你的名字：{{name}}
  5.     </div>
  6.     <script>
  7.     Vue.component('child',{
  8.         props: ['name'],
  9.         data: function(){
  10.             return {
  11.             newName: this.name
  12.                 }
  13.         },
  14.         template:'<input type="text" @keyup="changeName" v-model="newName"/>',
  15.         methods: {
  16.         changeName: function(e){
  17.             this.$emit('update:setname',this.newName);
  18.                 }
  19.         }
  20.     });
  21.     new Vue({
  22.         el:'#app',
  23.         data: {
  24.                 name:'Jhon'
  25.         },
  26.         methods:{
  27.         getNewName: function(newName){
  28.             this.name = newName;
  29.                 }
  30.         }
  31.     });
  32.     </script>

sync 简单实现 父子组件的双向绑定的更多相关文章

  1. Vue父子组件数据双向绑定，子组件可修改props

    第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...

  2. Vue的父子组件v-model双向绑定，父组件修改子组件中绑定的v-model属性

    先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...

  3. vue 父子组件数据双向绑定

    父组件 <find-search v-model="searchshow"></find-search> 子组件 props: { value: { typ ...

  4. [vue]实现父子组件数据双向绑定

    参考: http://www.cnblogs.com/xxcanghai/p/6124699.html <!DOCTYPE html> <html lang="en&quo ...

  5. vue 利用v-model实现父子组件数据双向绑定

    v-model父组件写法: v-model子组件写法: 子组件export default中的model:{}里面两个值,prop代表着我要和props的那个变量相对应,event表示着事件,我触发事 ...

  6. 7.vue组件(二)--双向绑定,父子组件访问

    本文主要说两件事 1. 如何实现父子组件之间的双向绑定 2. 父组件如何访问子组件的data,method, 子组件如何访问父组件的data,method等 一. 如何实现父子组件之间的双向绑定 案例 ...

  7. 如何在Vue2中实现组件props双向绑定

    Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...

  8. ionic3.x angular4.x ng4.x 自定义组件component双向绑定之自定义计数器

    本文主要示例在ionic3.x环境下实现一个自定义计数器,实现后最终效果如图: 1.使用命令创建一个component ionic g component CounterInput 类似的命令还有: ...

  9. vue 自定义组件 v-model双向绑定、 父子组件同步通信

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

随机推荐

  1. 第一个python&selenium自动化测试实战项目

    说明:本项目采用流程控制思想,未引用unittest&pytest等单元测试框架 一.项目介绍 目的 测试某官方网站登录功能模块可以正常使用 用例 1.输入格式正确的用户名和正确的密码,验证是 ...

  2. Codeforces Round #552 (Div. 3)-C-Gourmet Cat

    http://codeforces.com/contest/1154/problem/C 题意: 有一只猫,周一周四周日吃鱼肉,周二周六吃兔肉,周三周五吃鸡肉,现给出三种肉的数量,问最多能吃多少天? ...

  3. 拓展-教你手把手用纯CSS写轮播图

    先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...

  4. JavaScript基础入门01

    JavaScript能用来做什么?     页面分为:结构.样式.行为.   JavaScript的组成:     ECMAScript.BOM.DOM       ECMAScript是一个标准,它 ...

  5. RookeyFrame 代码层面 常用方法

    测试代码均写在这个类里面的,因为是测试嘛,所以表名那些就将就看了.最后写完了再贴上全部代码 类的路径:Rookey.Frame.Operate.Base -> Test -> Class1 ...

  6. 数列的前$n$项和$S_n$的求法

    相关公式 ①等差数列的\(S_n=\cfrac{n(a_1+a_n)}{2}=na_1+\cfrac{n(n-1)\cdot d}{2}\) ②等比数列的\(S_n=\left\{\begin{arr ...

  7. 启动hadoop报does not contain a valid host:port authority:node2_1:9000

    报错:启动hadoop报does not contain a valid host:port authority:node2_1:9000 原因:主机的hostname不合法,修改为不包含着‘.’ ' ...

  8. nginx 访问控制之deny allow

    Nginx的deny和allow指令是由ngx_http_access_module模块提供,Nginx安装默认内置了该模块. 除非在安装时有指定 --without-http_access_modu ...

  9. git 初始用法

    Git global setup git config --global user.name "xiaoming" git config --global user.email & ...

  10. shell 求数组的平均值，求和，最大值，最小值

    test.sh #!/bin/bash arr=( ) let min=${arr[]} let max=${min} sum= ;i<${#arr[*]};i++)) do [[ ${min} ...