javascript - Vue : component failed to update $parent

Question

我想从子组件更新 $parent 数据。 (我知道这很糟糕，但对于紧密绑定(bind)的组件来说非常转换)。

所以我尝试如下所示，但它会更新名为“未定义”的字段:

Vue.config.productionTip = false;

const child = {
  template: `
    <div class="hello">
      <input type="text" v-model="$parent.obj[this.field]">
      <pre>{{ $props }}</pre>
    </div>`,

  props: ['field'],
}

new Vue({
  el: "#app",

  components: {
    child,
  },

  data() {
    return {
      obj: {
        f1: 111,
        f2: 222
      }
    }
  },

});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  parent:
  <pre>{{ $data }}</pre>
  
  <hr>
  
  child:
  <child field="f1" />
</div>

Answer 1

您已将 this 关键字添加到 $parent.obj 的属性中。您不需要在模板中使用 this 关键字。 这是工作代码:codesandbox