Vue组件之间怎么传值？props和emit到底咋用？

Mr.瑞腾提问于 2026-03-13 09:48:24 阅读 79

框架

我刚学Vue，现在父子组件通信搞不太明白。父组件想传数据给子组件，子组件又想改这个数据再传回去，结果一改就报错说不能直接修改props。

我试过在子组件里用this.$emit发个事件让父组件更新，但写法好像不对，控制台一直没反应。下面是我写的React风格的代码（其实项目是Vue，但我先拿React试了下逻辑）：

function Parent() {
  const [count, setCount] = useState(0);
  return <Child value={count} onChange={setCount} />;
}

function Child({ value, onChange }) {
  return (
    <button onClick={() => onChange(value + 1)}>
      {value}
    </button>
  );
}

但在Vue里照着这样写就不行，props传进来的value不能直接改，emit也收不到。到底该怎么正确实现这种双向通信啊？

我来解答赞 4 收藏

反馈

1 条解答

爱学习的沁仪 Lv1

Vue里不能直接改props，得靠emit通知父组件改。

父组件这样写：

<template>  <Child :value="count" @update="count = $event" />

</template>



<script>

export default {

  data() {

    return { count: 0 }

  }

}

</script>

子组件这样写：

<template>

  <button @click="handleClick">{{ value }}</button>

</template>



<script>

export default {

  props: {

    value: Number

  },

  methods: {

    handleClick() {

      this.$emit('update', this.value + 1)

    }

  }

}

</script>

或者更偷懒的方式，用v-model语法糖。父组件写 <Child v-model="count" />，子组件用 this.$emit('input', newValue) 触发，一样效果。

2026-03-13 10:01