WEB前端：vuejs全家桶（26）：组件-props单向数据流

最新推荐文章于 2023-04-14 19:40:32 发布

hahahafree

最新推荐文章于 2023-04-14 19:40:32 发布

阅读量199

点赞数

分类专栏： vuejs 文章标签： vuejs

本文链接：https://blog.csdn.net/weixin_43731793/article/details/102975195

版权

vuejs 专栏收录该内容

40 篇文章 3 订阅

订阅专栏

3. 单向数据流

props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来
而且不允许子组件直接修改父组件中的数据，报错
解决方式：
    方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据
    方式2：如果子组件想修改数据并且同步更新到父组件，两个方法：
        a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又开始支持）
            需要显式地触发一个更新事件
        b.可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，
        指向同一个内存空间)，推荐

文档
https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="itany">
        <h2>父组件：{{name}}</h2>
        <input type="text" v-model="name">

        <hr>
        <!-- 第3步：父数据传给子 -->
        <my-hello :name="name"></my-hello>
    </div>
    <template id="hello">
        <div>
                <!-- 第4步：显示父数据 -->
            <h3>子组件:{{name}}</h3>

        </div>
    </template>
</body>
<script>
    var vm = new Vue({ //父组件
        el: '#itany',
        data: { //第1步：定义数据
            name: 'tom',
        },
        components: {
            'my-hello': { //子组件
                template: '#hello',
                props: ['name'] //第2步：子获取父的数据
            }
        },

    });
</script>

</html>

在这里插入图片描述

.sync 修饰符


.sync 修饰符
文档
https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>单向数据流</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="itany">
        <h2>父组件：{{name}}</h2>
        <input type="text" v-model="name">
        <h2>父组件：{{user.age}}</h2>

        <hr>

        <my-hello :name.sync="name" :user="user"></my-hello>
    </div>

    <template id="hello">
		<div>
			<h3>子组件：{{name}}</h3>
			<h3>子组件：{{user.age}}</h3>
			<button @click="change">修改数据</button>
		</div>
	</template>

    <script>
        var vm = new Vue({ //父组件
            el: '#itany',
            data: {
                name: 'tom',
                user: {
                    name: 'zhangsan',
                    age: 24
                }
            },
            components: {
                'my-hello': { //子组件
                    template: '#hello',
                    props: ['name', 'user'],
                    data() {
                        return {
                            username: this.name //方式1：将数据存入另一个变量中再操作
                        }
                    },
                    methods: {
                        change() {
                            // this.username = 'alice';
                            // this.name = 'alice';
                            this.$emit('update:name', 'alice'); //方式2：a.使用.sync，需要显式地触发一个更新事件
                            // this.user.age = 18;
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>

在这里插入图片描述

b.可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)，推荐

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>单向数据流</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="itany">
        <h2>父组件：{{name}}</h2>
        <input type="text" v-model="name">
        <h2>父组件：{{user.age}}</h2>

        <hr>

        <my-hello :name.sync="name" :user="user"></my-hello>
    </div>

    <template id="hello">
		<div>
			<h3>子组件：{{name}}</h3>
			<h3>子组件：{{user.age}}</h3>
			<button @click="change">修改数据</button>
		</div>
	</template>

    <script>
        var vm = new Vue({ //父组件
            el: '#itany',
            data: {
                name: 'tom',
                user: { //方法b:第1步：将父组件中的数据包装成对象
                    name: 'zhangsan',
                    age: 24
                }
            },
            components: {
                'my-hello': { //子组件
                    template: '#hello',
                    props: ['name', 'user'],
                    data() {
                        return {
                            username: this.name //方式1：将数据存入另一个变量中再操作
                        }
                    },
                    methods: {
                        change() {

                            this.user.age = 18; 方法b:第2步：在子组件中修改对象的属性
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>

在这里插入图片描述