vue子组件直接修改props的值

原创于 2021-04-09 16:43:53 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

js基础同时被 3 个专栏收录

8 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

父子组件传值

1 篇文章

订阅专栏

本文讨论了在Vue框架中，如何处理子组件试图直接修改从父组件接收到的props值的问题。通常不建议子组件直接改变props，因为这会破坏组件的单向数据流原则，导致数据管理混乱。正确的做法是通过使用emit触发事件来通知父组件进行状态更新。

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

父组件：

<son :num.sync="num"></son>

子组件：

<script>
export default {
  props: {
    num: {
      type: Number,
      default: 1
    }
  },
  methods: {
    addNum() {
      this.$emit('update:num',10);//如果变量是驼峰，应该使用驼峰形式
    }
  }
}
</script>