javascript - Vue.js 嵌套引用，方法未定义

Question

我有一个 3 级深度组件设置，如下所示。

- container
  - section-1 // section1Ref
    - form-1 // form1Ref

容器组件会通过this.$refs.section1Ref.submit()触发section-1中的submit方法。

section组件中的submit方法会调用form-1组件中的submit方法像 this.$refs.form1Ref.submit()

我在 this.$refs.form1Ref.submit() 调用中收到此错误。

this.$refs.form1Ref.submit is not a function

不过我 100% 确定它是在 form-1 组件的 methods 对象中定义的。

我注意到当引用深度为 3 层时会发生这种情况。

Answer 1

它对我有用，这是我的示例代码

Vue.component('sec', {
  template: `
  <div>section
    <br>
    <form1 ref="form"></form1>
  </div>`,
  methods: {
    callSection() {
      this.$refs.form.callForm();
    }
  }
});
Vue.component('form1', {
  template: `<div>form</div>`,
  methods: {
    callForm() {
      console.log('am called inside form')
    }
  }
});

Vue.component('container', {
  template: `
  <div>
    <button @click="clickMe">Click me</button>
    <br>
    <sec ref="section"></sec>
  </div>`,
  methods: {
    clickMe() {
      this.$refs.section.callSection();
    }
  }
});

// create a new Vue instance and mount it to our div element above with the id of app
Vue.config.devtools = false;
Vue.config.productionTip = false;

var vm = new Vue({
  el: '#app'
});

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

<div id="app">
  <container />
</div>