Vue 在 props 更新时重置子组件数据答案

【问题标题】：Vue resets child Component data on props updateVue 在 props 更新时重置子组件数据
【发布时间】：2021-05-23 10:49:09
【问题描述】：

我有子组件，它有一些内部数据，不应该从外部更改。但是当我从父组件更新 prop 时，这个内部数据会被重置。

基本上在下面的示例中，当我们从外部更改title 时，value 被设置回空''。如何通过子组件道具更新使value 持久化？

Child.vue

<template>
  <div class="child">
    <h2>{{title}}</h2>
    <input type="text" :value="value" v-on:change="$emit('change', $event.target.value)">
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        default: 'Just title'
      }
    },
    data() {
      return {
        value: ''
      }
    }
  }
</script>

父.vue

<template>
  <div class="parent">
    <Child :title="title" v-on:change="processTitle($event)"></Child>
  </div>
</template>

<script>
  import Child from './Child';

  export default {
    data() {
      return {
        title: 'Title from parent'
      }
    },
    methods: {
      processTitle(value) {
        this.title = value.reverse();
      }
    }
  }
</script>

【问题讨论】：

标签： vue.js

【解决方案1】：

您没有设置value 数据属性，:value=value 的意思是“如果值发生变化，输入值应该接受该变化”。但是value 不会改变。如果您想保持简单，请改用v-model。

Vue.component("Child", {
  props: {
    title: {
      default: 'Just title'
    }
  },
  data() {
    return {
      value: ''
    }
  },
  template: `
    <div class="child">
      <h2>{{title}}</h2>
      <input type="text" v-model="value" v-on:change="$emit('change', $event.target.value)">
    </div>
  `
})

new Vue({
  el: "#app",
  data() {
    return {
      title: 'Title from parent'
    }
  },
  methods: {
    processTitle(value) {
      this.title = value.split("").reverse().join("");
    }
  },
  template: `
    <div class="parent">
      <child :title="title" v-on:change="processTitle($event)"></child>
    </div>
  `
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

编辑

另外，如果你想要一个连续的效果，不要使用@change - 而是使用@input：

Vue.component("Child", {
  props: {
    title: {
      default: 'Just title'
    }
  },
  data() {
    return {
      value: ''
    }
  },
  template: `
    <div class="child">
      <h2>{{title}}</h2>
      <input type="text" v-model="value" v-on:input="$emit('change', $event.target.value)">
    </div>
  `
})

new Vue({
  el: "#app",
  data() {
    return {
      title: 'Title from parent'
    }
  },
  methods: {
    processTitle(value) {
      this.title = value.split("").reverse().join("");
    }
  },
  template: `
    <div class="parent">
      <child :title="title" v-on:change="processTitle($event)"></child>
    </div>
  `
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

【讨论】：