Vue 父组件和子组件之间的双向数据流动 .sync【版本需要2.3.0+】

来源：互联网发布：女白色t恤淘宝店铺推荐编辑：程序博客网时间：2024/06/05 04:14

<head>    <meta charset="UTF-8">    <title></title></head><body>    <div id="test">        <my :foo.sync='msg'></my>        <!--@update:foo='val=>msg=val'-->        {{msg}}    </div>    <script src="https://unpkg.com/vue"></script>    <script type="text/javascript">        Vue.component('my', {            template: '<button @click="change(\'a\')">组件{{foo}}</button>',            props: ['foo'],            methods: {                change: function(newValue) {                    console.log(newValue)                    this.$emit('update:foo', newValue); //调用update钩子函数更新foo属性，并传入新值，val=>msg=val是ES6箭头写法，function(val){msg=val;}                    //使用:foo.sync='msg'这种写法会自动扩展为 @update:foo='val=>msg=>val'【版本要在2.3.0+】，否则需要手动写                }            }        });        var vm = new Vue({            el: '#test',            data: {                msg: '思维'            },            methods: {                go: function() {                    console.log('go');                }            }        })    </script></body>

阅读全文

0 0