Vue.js Vue在道具更新时重置子组件数据

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

基本上在下面的示例中，当我们从外部更改

标题

时，

值

被设置回空“”。如何使用子组件道具更新使

值

持久化

Child.vue

{{title}}
导出默认值{
道具：{
标题：{
默认设置：“仅标题”
}
},
数据（）{
返回{
值：“”
}
}
}

Parent.vue

从“./Child”导入子项；
导出默认值{
数据（）{
返回{
标题：“来自家长的标题”
}
},
方法：{
processTitle（值）{
this.title=value.reverse（）；
}
}
}

您没有设置

值

数据属性，

:value=value

意味着“如果值发生变化，输入值应拾取该变化”。但是

值

不变。如果您想保持简单，请使用

v-model

Vue.component（“子”{
道具：{
标题：{
默认设置：“仅标题”
}
},
数据（）{
返回{
值：“”
}
},
模板：`
{{title}}
`
})
新Vue({
el:“应用程序”，
数据（）{
返回{
标题：“来自家长的标题”
}
},
方法：{
processTitle（值）{
this.title=value.split（“”）.reverse（）.join（“”）；
}
},
模板：`
`
})

<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>

<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>