如何在 vue.js 子组件中调用全局函数？

Question

全局函数init()在加载屏幕时输出控制台日志。 但是，单击子组件按钮不会重新启用init()函数。

当我单击孩子组件中的按钮时，如何调用全局函数init() ？

App.vue（父级）

<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{name: 'home'}">Home</router-link> |
      <router-link :to="{name: 'about'}">About</router-link>
    </div>
     <router-view></router-view>
  </div>
</template>


<script>
  import './assets/css/style.css'
  import './assets/js/commmon.js'

  export default {
  }
</script>

Home.vue（子）

<template>
  <div>
    <a href="#" id="btn_link">Home Button</a><br><br>
  </div>
</template>

主文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

路由器.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    { path: '/', name: 'home', component: Home},
    { path: '/about', name: 'about', component: About},
  ]
})

function init() {
  console.log('load inti()')
}
init();

$('#btn_link').click(function(){
  init();
});

Answer 1

js 模块的整个想法是阻止您拥有或据称需要全局范围。 人们有时会建议将全局函数添加到 Vue 对象的解决方法，这让我觉得这是一种比疾病更糟糕的治疗方法。 我对此的回答是在 vue 应用程序的根目录中provide一个全局对象，将函数放入其中，然后inject其注入任何需要它的组件中。

正如评论中所说，不要在 Vue 中使用 jquery。 您的事件处理程序应该在包含按钮的组件的methods中。