VUE2.0组件自定义事件.sync实例

Posted 2020-10-11

        <div id="root">
        　　<parent></parent>
    　　 </div>

　　　　 var childNode = {
            template:‘                <div class="child">                    <div>子组件数据 {{ childMsg }} </div>                    <input v-model="childMsg">                    <button v-on:click="add">+1</button>\\ //第一步：点击按钮
                </div>            ‘,
            data:function(){
                return {
                    childMsg:0
                }
            },
            methods:{
                add:function(){ //第二步：触发add方法，再触发update:foo，用childMsg更新foo，因为.sync的原因，数据变成了双向绑定 更改foo同样也更改了父组件的msg属性
                    this.childMsg++
                    this.$emit(‘update:foo‘,this.childMsg)
                }
            }
        }
        var parentNode = {
            template:‘                <div class="parent">                    <p>父组件数据 {{ msg }} </p>                    <child :foo.sync="msg"></child>\\ //（v-bind:foo 给子组件绑定一个foo属性，把父组件的属性msg赋值子组件的foo）
                </div>            ‘,
            components:{
                ‘child‘:childNode
            },
            data:function(){
                return {
                    msg:0
                }
            }
        }
        new Vue({
            el:‘#root‘,
            components:{
                ‘parent‘:parentNode
            }
        })

DOM渲染的结果为：