vue中.sync描述符

·  阅读 467

sync是语法糖 :title.sync 有两步 1  :title="title" 2 @update:title="val => title = val"

:title.sync="title"会被扩展为@update:title="val => title = val" :title="title"

方便子组件修改父组件的属性


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <div id="app">
        <div>
            <div>
                <text-document @update:title="val => title = val" :title="title" />
            </div>
            <div>
                <text-document :title.sync="title" />
            </div>
            <div>
                {{title}}
            </div>
        </div>
    </div>
    <script src="./script/vue.js"></script>
    <script>
        Vue.component('text-document', {
            props: ['title'],
            template: ` <div>
            <div @click="setNewTitle">
                {{title}}
            </div>
        </div>`,
            methods: {
                setNewTitle: function () {
                    //手动进行更新父组件中的值
                    console.log(121)
                    this.$emit('update:title', '这步操作修改标题实现prop双向绑定')
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                title: '对prop进行“双向绑定”'
            },
        });
    </script>
</body>

</html>
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改