vue中.sync描述符

sync是语法糖 :title.sync 有两步 1 : 2 @update:

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

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


<!DOCTYPE html>
<html>

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

<body>
    <div id="app">
        <div>
            <div>
                <text-document @update: : />
            </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>

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。