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>

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

它还向我显示以下消息：

[Vue警告]：避免直接改变道具，因为该值将是父组件重新渲染时会覆盖。相反，使用基于道具价值的数据或计算属性。支持存在变异：“标题”

将子组件与其父组件连接的方法是什么？

谢谢..

Answer 1

首先，您需要制作v-model的副本并放入数据，然后使用Vue绑定到该数据，因为created不希望您直接更改道具在组件内部，因此，在prop钩子内只需将export default{ props: ['title'], created() { this.val = this.title }, data() { return { val: '' } } }复制到数据中的属性：

v-model

然后使用<input v-model="val">绑定到它：

watcher

下一步是在值发生变化时将数据发送回父级，您可以在val内执行此操作，只需在change-title组件中$emit进行观察即可watch: { val() { this.$emit('title-updated', this.val); } } 1}}它：

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

然后你就可以在你的父母那里听这个事件：

updateTitle

最后添加title方法来更改父级中的methods: { updateTitle(title) { this.title = title; } }：

$controller = new AnetController\CreateCustomerProfileController($request);
$response = $controller -> executeWithApiResponse(\net\authorize\api\constants\ANetEnvironment::PRODUCTION); 
        $rsp = $response -> getMessages() -> getMessage()[0] -> getCode();

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

使用.vue webpack（vue2）将子数据组件更新到vue.js中的父组件

1 个答案: