使用 .vue webpack(vue2) 将子组件的数据组件更新为 vue.js 中的父组件

Question

我在测试vue.js的组件，遇到子组件变化时更新父组件的问题。

我已经使用 vue-cli (webpack) 生成了项目，并且我正在使用具有自己的 .vue 文件的组件。

代码：

App.vue

<template>
   <div id="app">
     <h2>{{ title }}</h2>
      <div class="pie">
       <change-title :title="title"></change-title>
     </div>
   </div>
</template>

<script>      
  import ChangeTitle from './components/ChangeTitle'

  export default {
    components: {
      ChangeTitle
    },
    data () {
      return {
        title: 'The title'
      }
    }
  }
</script> 

ChangeTitle.vue

<template>
    <div>
        <input v-model="title">
    </div>
</template>

<script>
export default {
  props: ['title']
}
</script>

问题 当应用程序加载正确显示标题属性时，但当我在<change-title> 组件字段中键入时，直接在App.vue 文件中的标题属性不会更新。

它还向我显示以下消息：

[Vue 警告]：避免直接改变一个 prop，因为它的值是 每当父组件重新渲染时被覆盖。相反，使用 基于道具值的数据或计算属性。道具存在 变异：“标题”

子组件与父组件的连接方式是什么？

谢谢..

Answer 1

首先，您需要复制prop 并放入数据中，然后使用v-model 绑定到它，因为Vue 不希望您直接从组件内部更改道具，所以，在 created 钩子中，只需将 prop 复制到数据中的属性：

export default{
  props: ['title'],
  created() {
    this.val = this.title
  },
  data() {
    return {
      val: ''
    }
  }
}

然后使用v-model绑定到它：

<input v-model="val">

下一步是在值更改时将数据发送回父级，您可以在 watcher 中执行此操作，只需在 change-title 组件中查看 val 和 $emit 即可：

  watch: {
    val() {
      this.$emit('title-updated', this.val);
    }
  }

然后你可以像这样在你的父母中监听那个事件：

<change-title :title="title" @title-updated="updateTitle">

最后添加 updateTitle 方法来更改父级中的 title：

  methods: {
    updateTitle(title) {
      this.title = title;
    }
  }

这是整个 JSFiddle：https://jsfiddle.net/90ws3sL6/