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

最新推荐文章于 2022-11-01 15:37:51 发布

letMeAlone_

最新推荐文章于 2022-11-01 15:37:51 发布

阅读量1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/a250758092/article/details/78416555

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<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>

letMeAlone_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 父组件和子组件之间的双向数据流动 .sync【版本需要2.3.0+】

<head> <meta charset="UTF-8"> <title></title></head><body> <div id="test"> <my :foo.sync='msg'></my>  {{msg}} </div> <script
复制链接

扫一扫