0

当我尝试使用@click指令更改道具的值时，我收到此警告：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name"

我的代码如下：

<html>
<head>
<title>Vue test</title>
</head>
<body>
<div id="app">
    <user-name name="Flavio"></user-name>

</div>

<script src="assets/js/vue.js"></script>
<script type="text/javascript">
    Vue.component('user-name', {

      props: ['name'],
      template: '<p @click=bio1()>Hi {{ name }}</p>',

      methods: {
        bio1(){
            this.name = "Caleb";
        }
      }
    })

    new Vue({
      el: "#app"
    })
</script>

</body>
</html>

这个警告的原因是什么？

4

1 回答 1

2

VueJSprops中的表单单向数据绑定。这意味着，您将 props 中的值从父组件传递给子组件，并避免子组件改变这些属性。每次更新父组件时，更新的值也会在子组件中刷新。

在您的情况下，由于您需要更新传递下来的道具的值，因此最好使用道具的值定义计算属性：

props: ['name'],
computed: {
  localizedName: function () {
    return this.name.trim()
  }
}

阅读有关 VueJS 中单向数据流的更多信息：https ://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

于 2018-09-02T08:21:25.473 回答