Category: Vue Answers

Sometimes, we want to pass data from child to parent in Vue.js.

In this article, we’ll look at how to pass data from child to parent in Vue.js.

How to pass data from child to parent in Vue.js?

To pass data from child to parent in Vue.js, we should emit an event from the child component to the parent component.

For instance, we write

this.$emit("eventname", this.variable);

to call this.$emit with the event name and the variables we want to emit to the parent.

Then in the parent component, we write

<template>
  <child-component @eventname="updateParent"></child-component>
</template>

<script>
export default {
  //...
  methods: {
    updateParent(variable) {
      this.parentvariable = variable;
    },
  },
  //...
};
</script>

to add the child-component in our parent component’s template.

And we listen for the eventname event and call updateParent when the eventname event is emitted.

We get this.variable that we called this.$emit with from the variable parameter of updateParent.

Conclusion

To pass data from child to parent in Vue.js, we should emit an event from the child component to the parent component.

Sometimes, we want to fix Vue v-on:click not working on a component

In this article, we’ll look at how to fix Vue v-on:click not working on a component.

How to fix Vue v-on:click not working on a component?

To fix Vue v-on:click not working on a component, we need to add the native modifier so that Vue will listen for native events on the component.

For instance, we write

<template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>

to set @click.native to testFunction to call testFunction with a click is done on anything in the test component.

Conclusion

To fix Vue v-on:click not working on a component, we need to add the native modifier so that Vue will listen for native events on the component.

Sometimes, we want to call a Vue.js component method from outside the component.

In this article, we’ll look at how to call a Vue.js component method from outside the component.

How to call a Vue.js component method from outside the component?

To call a Vue.js component method from outside the component, we can assign a ref to our component and then we can call the component’s method with it.

For instance, we write

<template>
  <my-component ref="foo"></my-component>
</template>

<script>
//...
export default {
  //...
  components: { "my-component": myComponent },
  methods: {
    doSomething() {
      this.$refs.foo.doSomething();
    },
  },
  //...
};
</script>

to assign the foo ref to my-component.

Then we call this.$refs.foo.doSomething(); in the doSomething method where this.$refs.foo references the my-component component instance.

Conclusion

To call a Vue.js component method from outside the component, we can assign a ref to our component and then we can call the component’s method with it.

In this article, we’ll look the difference between v-model and v-bind in Vue.js.

What’s the difference between v-model and v-bind in Vue.js?

The difference between v-model and v-bind in Vue.js is the v-bind lets us pass a prop from parent to child.

v-model is the combination of v-bind:value and the input event.

For instance,

<template>
  <input v-model="something" />
</template>

//...

is the same as

<template>
  <input
    v-bind:value="something"
    v-on:input="something = $event.target.value"
  />
</template>

//...

or

<input
   :value="something"
   @input="something = $event.target.value"
>

for short.

: is the shorthand for v-bind and @ is the shorthand for v-on:input.

Conclusion

The difference between v-model and v-bind in Vue.js is the v-bind lets us pass a prop from parent to child.

v-model is the combination of v-bind:value and the input event.

Sometimes, we want to add an event bus with Vue.js 3.

In this article, we’ll look at how to add an event bus with Vue.js 3.

How to add an event bus with Vue.js 3?

To add an event bus with Vue.js 3, we can use the mitt package.

To install it, we run

npm install --save mitt

Then we use it by writing

import { createApp } from "vue";
import App from "./App.vue";
import mitt from "mitt";
const emitter = mitt();
const app = createApp(App);
app.config.globalProperties.emitter = emitter;
app.mount("#app");

in our app’s entry point file.

We make emitter available to all components with

app.config.globalProperties.emitter = emitter;

Then we use it by writing

<template>
  <header>
    <button @click="toggleSidebar">toggle</button>
  </header>
</template>

<script>
export default {
  data() {
    return {
      sidebarOpen: true,
    };
  },
  methods: {
    toggleSidebar() {
      this.sidebarOpen = !this.sidebarOpen;
      this.emitter.emit("toggle-sidebar", this.sidebarOpen);
    },
  },
};
</script>

We call this.emitter.emit to emit the toggle-sidebar event.

Then in another component, we write

<template>
  <aside class="sidebar" :class="{ 'sidebar--toggled': !isOpen }">...</aside>
</template>
<script>
export default {
  name: "sidebar",
  data() {
    return {
      isOpen: true,
    };
  },
  mounted() {
    this.emitter.on("toggle-sidebar", (isOpen) => {
      this.isOpen = isOpen;
    });
  },
};
</script>

to call this.emitter.on to listen to the toggle-siderbar event and get the value in the 2nd argument of emit from the isOpen parameter in the callback.

Conclusion

To add an event bus with Vue.js 3, we can use the mitt package.