How do I call a global function in a vue.js child component?

Question

The global function init() outputs a console log when the screen is loaded. However, clicking the child component button does not re-enable the init() function.

How can I call the global function init() when I click a button in my child's component?

App.vue (parent)

<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 (child)

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

main.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')

router.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();
});

You shouldn't. Don't use jQuery with modern frameworks.

Estus Flask
– Estus Flask

2019-09-05 07:16:19 +00:00
Commented Sep 5, 2019 at 7:16 — Estus Flask
– Estus Flask, Commented Sep 5, 2019 at 7:16

bbsimonbb · Accepted Answer · 2019-09-05 07:48:30Z

1

The whole idea of js modules is to stop you having, or supposedly needing, a global scope. People sometimes suggest a workaround of adding your global functions to the Vue object, which strikes me as a cure worse than the disease. My answer to this is to provide one global object in the root of your vue app, put your functions inside, then inject it into any component that needs it.

As it says in the comments, don't use jquery with Vue. Your event handler should be in the methods of the component that contains the button.

answered Sep 5, 2019 at 7:48

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I call a global function in a vue.js child component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related