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>
posted @ 2019-12-01 16:43  Xuhua123  阅读(423)  评论(0)    收藏  举报