Vue学习笔记（九）——sync修饰符

最新推荐文章于 2024-06-03 11:05:26 发布

讨厌走开啦

最新推荐文章于 2024-06-03 11:05:26 发布

阅读量1.3k

点赞数

分类专栏： Vue 文章标签： Vue sync update emit 修饰符

本文链接：https://blog.csdn.net/lqlqlq007/article/details/88992263

版权

Vue 专栏收录该内容

32 篇文章 6 订阅

订阅专栏

参考文档：https://cn.vuejs.org/v2/guide/

sync修饰符用于简化子组件通知父元素更新传入参数这个动作的代码逻辑，可以参考如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sync修饰符</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 绑定单个属性 -->
    <my-com-a :title.sync="title"></my-com-a>
    <!-- 上下是等价的，但上面的写法更简洁 -->
    <!--<my-com-a :title="title" @update:title="title = $event"></my-com-a>-->

    <!-- 绑定对象 -->
    <my-com-b v-bind.sync="obj"></my-com-b>
    <!-- 上下是等价的，但上面的写法更简洁 -->
    <!--<my-com-b :objkey="obj.objkey" @update:objkey="obj.objkey = $event"-->
              <!--:objvalue="obj.objvalue" @update:objvalue="obj.objvalue = $event"></my-com-b>-->
</div>
<script>
    Vue.component('my-com-a', {
        template: '<div><span @click="changeA">{{title}}</span></div>',
        props: ['title'],
        methods: {
            changeA: function () {
                this.$emit("update:title", "it is new title by my-com-a.");
            }
        }
    });
    Vue.component('my-com-b', {
        template: '<div><span @click="changeB">{{objkey}}---{{objvalue}}</span></div>',
        props: ['objkey', 'objvalue'],
        methods: {
            changeB: function () {
                this.$emit("update:objkey", "it is new key by my-com-b.");
            }
        }
    });
    new Vue({
        el: '#app',
        data: {
            title: "it is title.",
            obj: {
                objkey: "it is key.",
                objvalue: "it is value."
            },
            objkey: "it is key.",
            objvalue: "it is value.",
        },
        computed: {
            //如果是计算属性则无效
            // obj: function () {
            //     return {
            //         objkey: this.objkey,
            //         objvalue: this.objvalue
            //     }
            // }
        }
    });
</script>
</body>
</html>