Question

我构建了一个自定义组件，我传递了一个属性。

ia16-elf-g++: error: unrecognized command line option '-mhard-float'

然后，每当父级更改“selectedFriend”时，我希望删除子组件中的数据。在这种情况下，它意味着删除错误消息。

我怎么能这样做？

注意：我想办法通过使用属性来存储错误而不是数据对象。但是，Vue经常提醒我，我不应该修改属性......

现在认为局部变异是一种反模式，例如声明一个道具，然后设置this.myProp ='someOtherValue' 组件。由于新的渲染机制，每当父组件重新渲染，子组件的本地更改将是覆盖。 Source

Answer 1

由于提供的信息量有限，手表可能最合适。

watch:{
  friend(){
    this.error = ""
  }
},

这是一个例子。

＆＃13;

console.clear()

Vue.component('friend', {
  props: ['friend'],
  template:"#friend-component",
  data: function(){
    return { error: '' };
  },
  watch:{
    friend(newVal){
      this.error = ""
    }
  },
  methods: {
    addFriend: function () {
      this.error = 'You already added this friend';
    }
  }
});
new Vue({
  el: "#app",
  data:{
    selectFriend:"Bob"
  }
})

＆＃13;

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  <friend :friend="selectFriend"></friend>
  <button @click="selectFriend = 'Mary'">New Friend</button>
</div>

<template id="friend-component">
    <div>
        {{friend}}
        <div style="color:red;">{{error}}</div>
        <br />
        <input type="button" v-on:click="addFriend" value="Add" />
    </div>
</template>

＆＃13;

点击Add此处将显示错误。点击＆＃34;新朋友＆＃34;之后会设置父亲的friend值，手表会触发，清除错误。

当组件属性发生变化时重置数据

1 个答案: