【Vue.js】组件间数据传递的可响应

最新推荐文章于 2022-11-23 10:15:14 发布

一生ea

最新推荐文章于 2022-11-23 10:15:14 发布

阅读量682

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/weixin_39006917/article/details/114780025

版权

Vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

父组件向子组件进行数据传递，当父组件中的数据变化时，将自动传递给子组件。不允许子组件直接修改父组件中的数据。如果想实现子组件的数据变化，同步更新到父组件，有两种方式。

方式1：使用.sync修饰符+显式触发一个更新事件

方式2：将父组件中的数据包装成对象，然后在子组件中修改对象的属性

<body>
    <div id="app">
        <comp-a>
       
        </comp-a>
    </div>

    <template id='a'>
        <div>
            <p>父组件msg:{{msg}}</p>
            <p>父组件arr:{{arr}}</p>
            <button @click="changeData()">改变msg</button>
            <comp-b :msg.sync="msg" :arr="arr"></comp-b>
        </div>
    </template>

    <template id='b'>
        <div>
            <p>子组件msg:{{msg}}</p>
            <p>子组件arr:{{arr}}</p>
            <button @click="arr.push(4)">改变数组</button>
            <button @click="$emit('update:msg','hi')">改变msg</button>
        </div> 
    </template>
</body>

   new Vue({
        el: '#app',
        data() {
            return {

            }
        },
        components: {
            'comp-a':{
                template: '#a',
                data() {
                    return {
                        msg: 'welcome',
                        arr: [1, 2, 3],
                    }
                },
                methods:{
                    changeData(){
                        this.msg = "hello"
                    }
                },
                components: {
                    'comp-b': {
                        template: '#b',
                        props: {
                            msg: {
                                type: String
                            },
                            arr: {
                                type: Array
                            }
                        }
                    }
                }
            }
        }
    });

父组件中定义了msg和arr，分别是String类型和Array类型，以属性绑定的方式向子组件中传递数据。

触发changeData()事件后，可改变父组件中的msg值，子组件中对应属性的值也会被改变。

如果改变子组件中的msg值，无法响应到父组件，而改变arr值，父组件中的对应数据也会发生相应改变。这是因为数组、对象是引用数据类型，父组件和子组件属性名对应的是同一块存储空间，无论通过哪个进行修改，值都发生相应变化。

如果想要达到和传递数组、对象这种类型的值一样的效果，需要父组件在进行属性绑定时，给基础数据类型的属性添加sync修饰符。

<comp-b :msg.sync="msg" :arr="arr"></comp-b>

然后在子组件中绑定触发数据变化的事件时，使用$emit

<button @click="$emit('update:msg','hi')">改变msg</button>

一生ea

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue.js】组件间数据传递的可响应

父组件向子组件进行数据传递，当父组件中的数据变化时，将自动传递给子组件。不允许子组件直接修改父组件中的数据。如果想实现子组件的数据变化，同步更新到父组件，有两种方式。方式1：使用.sync修饰符+显式触发一个更新事件方式2：将父组件中的数据包装成对象，然后在子组件中修改对象的属性<body> <div id="app"> <comp-a> </comp-a> </div>
复制链接

扫一扫