Question

我试图调用内部函数＆＃39;方法＆＃39;从外面。但是，它不起作用。

Github问题报告相同：https://github.com/vuejs/vue/issues/329

vm.test(); // call a function in method, not working
this.vue.test()  // not working
export default {
  methods: {
    test: function() {
      alert('test fuction called');
    }
  }
}

Answer 1

目前还不是很清楚原始海报的实际目标是什么，但是在创建它之后，您可以在Vue实例上调用方法：

var viewModel = new Vue({
    el: "#app",
  data: {
    msg: "Hello there"
  },
  methods: {
    test: function() {
      alert('test fuction called');
    }
  }
});

viewModel.test();

工作示例：https://jsfiddle.net/Daryn/Lja7pake/3/

如果要导出单个文件组件，请尝试以下操作：

example.js

<script>
   export default {
    methods: {
      test: function() {
      alert('test fuction called');
     }
    }
   }
</script>

main.js

<script>
    import Thing from './example.js';
    Thing.test();
</script>

参考：https://vuejs.org/v2/guide/single-file-components.html

Answer 2

你想要实现的是根本上有缺陷的。除非您具有对该特定组件的实例的引用，否则您无法调用组件的方法。在您的代码中，哪个特定组件是Bool isSuccess = YES; if (sqlite3_open(path, &db) == SQLITE_OK) { char *errMsg; const char *sql_stmt = "CREATE TABLE IF NOT EXISTS contactTable (albumid integer primary key autoincrement ,directory CHAR(20) NOT NULL, albumname CHAR(32) NOT NULL, albumname CHAR(32) NOT NULL, count INT NOT NULL, orderid INT NOT NULL);"; if (sqlite3_exec(db, sql_stmt, NULL, NULL, &errMsg) != SQLITE_OK) { sqlite3_close(db); isSuccess = NO; } sqlite3_close(db); return isSuccess; } else { sqlite3_close(db); isSuccess = NO; } } sqlite3_close(db); NSLog(@"Albums Table Created"); return isSuccess;引用？

您所做的只是从模块中导出Vue组件定义;这里没有实例化组件。

我们需要查看更多代码或完整解释您的具体目标，以便我们提供替代解决方案。（为什么要尝试在其定义之外调用组件的方法？）

Answer 3

export default {
  ...
  methods: {
    ...
  },
  mounted () {
    EventBus.$on(‘EVENT_NAME’, function (payLoad) {
      ...
    });
  }
}

Answer 4

这就是我解决该问题的方法。

出于演示目的，我们使用Vue / CLI创建了一个新项目。安装完成后，我们使虚拟机暴露给全局。打开src/main.js并进行如下编辑：

src / main.js

import Vue from 'vue';
import App from './App.vue';

var vm = new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

// Add this line (tambahkan baris berikut):
window.vm = vm;

使生成的App.vue保持原样。因此vm（vm.$children[0]）的第一个孩子是App.vue。

我们看到App.vue有一个孩子。这使得HelloWorld.vue组件成为vm（vm.$children[0].$children[0]）的子代。知道了这一点，我们可以像这样从外部调用“ export default”中的方法：

src / components / HelloWorld.vue

<template>
  <div class="hello">
    <button 
      id="sebuahButton" 
      class="btn btn-outline-secondary btn-sm" 
      type="button"
    >Click Me, Jose!</button>
    <h1>{{ msg }}</h1>
    <!-- and some stuff, vue cli default generated code -->
  <div>
</template>

<script>
(function() {
    // wait for the DOM ready event in plain JavaScript
    document.addEventListener("DOMContentLoaded", event => {
        document.getElementById("sebuahButton").onclick = function() {
            vm.$children[0].$children[0].someAction();
        };
    });
})();

export default {
    name: "HelloWorld",
    props: {
        msg: String
    }
    methods: {
        someAction () {
            // do something (lakukan sesuatu masbro!)
            console.log("It's been called from outer space, Luke!");
        }
    }
}
</script>

在外部组件内调用VueJS方法＆＃39;导出默认值＆＃39;

4 个答案: