Question

我有一个vue组件和一个vue元素声明，如下所示

Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
  methods: {
    test: function() {

        // I am getting an error here
        app.aNewFunction();
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    aNewFunction: function() {
        alert("inside");
    }
  }
})

如何从vue组件调用vue app中的方法？

Answer 1

您可以像这样执行root实例方法：FOR /F "tokens=1-3 skip=4" %%A IN (%usrfile%) DO CALL GROUP rem Other code here GOTO :EOF :GROUP FOR %%a IN (x) DO CALL mkgroup.cmd %%A %%B %%C

this.$root.methodName()

Answer 2

我认为它更符合Vuejs架构的另一种解决方案，它使用事件监听器＆amp; amp;子组件与其父组件之间的发射器进行通信。

将this简单小提琴视为愿景

 Vue.component('todo-item', {
  template: '<li>This is a todo</li>',
  methods: {
    test: function() {
      console.log('Emmit this Event.');
      this.$emit('yourevent');
    }
  },
  created() {
    this.test();
  }
});

new Vue({
  el: '#vue-app',
  data: {
    'message': '',
  },
  methods: {
    aNewFunction(event) {
      console.log('yourevent Is Triggered!');
      this.message = 'Do Stuff...';
    },
  }
});

如何从vue组件调用vue app中的方法

2 个答案: