vue中你不知道的父子组件之间传值

最新推荐文章于 2024-05-22 13:59:06 发布

Graze_chen

最新推荐文章于 2024-05-22 13:59:06 发布

阅读量67

点赞数

文章标签： vue props/state js

本文链接：https://blog.csdn.net/weixin_43904993/article/details/118079848

版权

本文详细介绍了Vue中三种父子组件间数据交互方式：单向数据流、双向数据绑定与自定义事件。包括直接传值、子组件改变变量及影响父组件的实例，以及使用`v-model.sync`和`$emit('update')`的最佳实践。

摘要由CSDN通过智能技术生成

(1)直接父组件传值给子组件(但是子组件无法改变该变量)

父

<div class="temp1">
        <div>{{num}}</div>
        <temp2 num='123' />
    </div>

子

    <div>
        <div>{{num}}</div>
        <el-button @click="changenum">按钮</el-button>
    </div>
//    普通接收
    props: ["num"],
//定义类型且给默认值
props: {
        num: {
            type: Number,
            default: () => {
                return 0;
            }
        }
    },

(2)直接父组件传值给子组件(但是子组件可以改变该变量但是不能改变父组件的变量)

父

<div class="temp1">
        <div>{{num}}</div>
        <temp2 num='123' />
    </div>

子

    <div>
        <div>{{count}}</div>
        <el-button @click="changenum">按钮</el-button>
    </div>

    //将props的值传给data然后改变data的值
    data() {
        return {
            count: this.num
        };
    },
    props: {
        num: {
            type: Number,
            default: () => {
                return 0;
            }
        }
    },

(3)直接父组件传值给子组件(但是子组件可以改变该变量而且可以改变父组件的变量)

父

    <div class="temp1">
        <div>{{num}}</div>
        <temp2 :num='num' @changenum='changenum' />
    </div>

    methods: {
        changenum(e) {
            this.num = e;
        }
    }

子

    <div>
        <div>{{num}}</div>
        <el-button @click="changenum">按钮</el-button>
    </div>

    methods: {
        changenum() {
            this.$emit("changenum", 555);
        }
    }

这种方法如果子组件只想改变父组件的值,这种情况下写函数就没有意义了,下面这种方法则不需要写多余的函数

(3)直接父组件传值给子组件(但是子组件可以改变该变量而且可以改变父组件的变量且不需要多余的函数)

父

    <div class="temp1">
        <div>{{num}}</div>
        <temp2 :num.sync='num' />
    </div>

子

    <div>
        <div>{{num}}</div>
        <el-button @click="changenum">按钮</el-button>
    </div>

    
    props: {
        num: {
            type: Number,
            default: () => {
                return 0;
            }
        }
    },
    methods: {
        changenum() {
            this.$emit("update:num", 555);
        }
    }

此方法vue3中已经废弃请使用

v-model:num='num