Vue.js 如何将对象作为props传递并让组件更新子对象

Vue.component('child', {
  template: '#child',
  
  //The child has a prop named 'value'. v-model will automatically bind to this prop
  props: ['value'],
  methods: {
    updateValue: function (value) {
      //Not sure if both fields should call the same updateValue method that returns the complete object, or if they should be separate
      this.$emit('input', value);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentObject: {value1: "1st Value", value2: "2nd value"}
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <p>Parent value: {{parentObject}}</p>
  <child v-model="parentObject"></child>
</div>

<template id="child">
   <input type="text" v-bind:value.value1="value" v-on:input="updateValue($event.target.value)">
   <input type="text" v-bind:value.value2="value" v-on:input="updateValue($event.target.value)">
</template>

Vue.component('child', {
  template: '#child',
  props: ['value'],
  data() {
    return { val: {...this.value} };
  },
  watch: {
    val: {
      deep: true,
      handler(value) {
        this.$emit('input', value);
      }
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentObject: {value1: "1st Value", value2: "2nd value"}
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
  <p>Parent value: {{parentObject}}</p>
  <child v-model="parentObject"></child>
</div>

<template id="child">
  <div>
    <input type="text" v-model="val.value1">
    <input type="text" v-model="val.value2">
  </div>
</template>

Vue.js相关问答推荐

在Nuxt项目中混合Scrolltrigger与Lenis

VueJS不会呈现一个名为None的组件""

从组件中检索 Shopware CMS 编辑器中的自定义实体数据

在 v-for 中定义变量有什么问题吗？

如何在 v-for 指令切换状态下安全地制作包含附加到对象的复选框的列表(W/O 切换列表中的其他复选框)？

如何在 vue2.7 中删除 slot-scope

如何使用 vuejs 在浏览器 url 中获取当前 product.id 的详细信息

如何为 Vue 应用提供 robots.txt

如何为 Vue 项目设置 lint-staged？

Polyfill for ie

将 Vuetify 从 1.5 升级到 2 时，Sass-loader 错误 'options has an unknown property 'indentedSyntax''

如何在 Vue 中转发 $refs

Vue Cli 3 不允许我在 Webpack 中处理 SVG

Vuetify 数据表不显示数据

在 Vue JS 组件中使用 Laravel 路由的最佳方法是什么

在 Vue 单元测试中单击按钮时触发表单提交

如何访问通用 javascript 模块中的当前路由元字段

Vue过滤器应该如何使用typescript绑定？

vuejs 复制数据对象和删除属性也会从原始对象中删除属性

Vue.js 显示空格(换行符)