Vue：组件无法更新$ parent

Question

我想从子组件更新$ parent数据。 （我知道这很不好，但是对于紧密绑定的组件来说非常有用）。

所以我尝试如下所示，但是它会更新名为“ undefined”的字段：

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