javascript - 如何在 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>

主要.js

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 应用程序的根目录中提供一个全局对象，将您的函数放入其中，然后将其注入(inject)到任何需要它的组件中。

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