Question

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

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

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

部分组件中的submit方法将调用submit组件中的form-1方法，例如this.$refs.form1Ref.submit()

我在this.$refs.form1Ref.submit()发票中遇到此错误。

this。$ refs.form1Ref.submit不是函数

我100％确信它是在methods组件的form-1对象中定义的。

我注意到当ref深度为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>

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

1 个答案: