Vue父子组件间的数据传递_export default { components:{ housesinfoform }, da-优快云博客

本文详细介绍了Vue.js中父组件与子组件之间的数据传递方法，包括通过props从父组件向子组件传递数据，以及利用$emit函数从子组件向父组件发送事件。通过一个具体的示例，展示了如何在点击按钮时更新组件状态，并实现在父组件中同步这些更改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的父组件和子组件之间是可以相互传递数据的。

父组件→子组件：设置props属性；

子组件→父组件：$emit()函数。

下面举例说明。

先写一个简单的组件Child，可以通过单击+或-按钮来改变num_child的值并显示。

<template>
    <p>Child value: {{num_child}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
</template>

<script>
    export default {
        data() {
            return {
                num_child: 0,
            }
        },
        methods: {
            increment() {
                this.num_child++;
            },
            decrement() {
                this.num_child--;
            }
        }
    }
</script>

接下来建立Parent.vue作为父组件，在里面使用import语句实现对子组件Child.vue的加载。

<template>
    <Child></Child>
</template>

<script>
    import Child from './Child'

    export default {
        name: "Parent",
        components: {
            Child
        },
    }
</script>

然后在父组件中添加属性num_parent，准备实现num_parent与num_child之间值的双向传递。

同时在父组件的template中添加对自身属性num_parent的显示。

此时并没有实现任何两组件之间数据传递。

<template>
    <div>
        <Child></Child>
        <p>Parent value: {{num_parent}}</p>
    </div>
</template>

<script>
    import Child from './Child'

    export default {
        name: "Parent",
        components: {
            Child
        },
        data() {
            return {
                num_parent: 0
            }
        }
    }
</script>

下面开始实现数据传递部分。

首先是父组件→子组件：

在父组件template中的Child标签中添加属性v-bind:num_child="num_parent"，然后在子模块的export中添加属性props:['num_child']，这样就实现了num_parent向num_child的值传递。

然后是子组件→父组件：

为了单击+或-时，num_parent和num_child的值能够同时改变，这里尝试在子组件中使用$emit()发出信号，调用父组件的方法。所以需要改写子组件的两个方法：

methods: {
    increment(){
        this.$emit('incre')
    },
    decrement(){
        this.$emit('decre')
    }
}

而实现数值加减的任务就交给父组件来实现，所以在父组件中添加方法：

methods: {
    increment() {
        this.num_parent++;
    },
    decrement() {
        this.num_parent--;
    }
}

然后在父组件template的Child标签中继续添加属性：

<Child v-bind:num_child="num_parent" @incre="increment" @decre="decrement"></Child>

这样就实现了父子组件间传递数据的一个小例子。