这里主要是对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 简单实现 父子组件的双向绑定的更多相关文章

  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. The Difference between Gamification and Game-Based Learning

    http://inservice.ascd.org/the-difference-between-gamification-and-game-based-learning/ Have you trie ...

  2. SpringBoot整合ActiveMQ发送邮件

    虽然ActiveMQ以被其他MQ所替代,但仍有学习的意义,本文采用邮件发送的例子展示ActiveMQ 1. 生产者1.1 引入maven依赖1.2 application.yml配置1.3 创建配置类 ...

  3. Boring counting HDU - 3518 （后缀数组）

    Boring counting \[ Time Limit: 1000 ms \quad Memory Limit: 32768 kB \] 题意 给出一个字符串,求出其中出现两次及以上的子串个数,要 ...

  4. 【cf比赛记录】Codeforces Round #600 (Div. 2)

    Codeforces Round #600 (Div. 2) ---- 比赛传送门 昨晚成绩还好,AC A,B题,还能上分(到底有多菜) 补了C.D题,因为昨晚对C.D题已经有想法了,所以补起题来也快 ...

  5. 面试官问线程安全的List，看完再也不怕了！

    最近在Java技术栈知识星球里面有球友问到了线程安全的 List: 扫码查看答案或加入知识星球 栈长在之前的文章<出场率比较高的一道多线程安全面试题>里面讲过 ArrayList 的不安全 ...

  6. select多选左移右移的实现

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. 2018ECNA Difference[时空复杂度]

    目录 题干 代码和解释 题干 代码和解释 本题给出一个数列的第一个数A(1),要求找出m第一次出现(直接出现在数列中或是数列中某两项的差的绝对值)在这个数列的第几步中.数列递推公式:A(n+1)=A( ...

  8. JAVA字符编码二：Unicode,ISO-8859,GBK,UTF-8编码及相互转换

    第二篇:JAVA字符编码系列二:Unicode,ISO-8859-1,GBK,UTF-8编码及相互转换   1.函数介绍 在Java中,字符串用统一的Unicode编码,每个字符占用两个字节,与编码有 ...

  9. Java里方法的参数传递方式

    Java里方法的参数传递方式只有一种:值传递. Java中参数传递的都是参数值 下面从两个维度来看 1.传递的参数是8种基本数据类型 这个比较好理解,8种基本数据类型,作为参数时,可以理解为原来的一个 ...

  10. C#实体类对应SQL数据库的自增长ID怎么设置？

    /// <summary> /// 自增长ID /// </summary> [DatabaseGenerated(DatabaseGeneratedOption.Identi ...