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

Question

我正在测试 vue.js 的组件，当 child 发生变化时，我遇到了更新 parent 组件的问题。

我已经使用 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 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: "title"

child组件与其parent组件的连接方式是什么？

谢谢..

Answer 1

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

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

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

<input v-model="val">

下一步是在值改变时将数据发送回 parent，您可以在 watcher 中执行此操作，只需观察 [=23] 中的 val =] 组件和 $emit 它：

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

然后您可以像这样在 parent 中收听该事件：

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

最后添加 updateTitle 方法来更改 parent 中的 title:

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

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

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

Update a child's data component to the father component in vue.js using .vue webpack(vue2)

vue.js

vue-component

vuejs2