Search code examples
vue.jsvuejs2mixins

Can't I use the mixins function of parent component in child component?


I am using the mixins function in the vuejs to code efficiently. And then, I had a question. I have imported mixins 'TTS' in the parent component. And then the child component called the function of the tts. However, the function was not called. Is the parent component mixtns function not available in the child component?

import { tts } from "../components/mixins/tts/tts";

export default {
  mixins: [tts]
}

This is importing mixins in the parent component.

    <ion-row
      class="drawer_middle_menu ion-align-items-center ion-justify-content-center"
      @click="trySpeak($t('timeOut'))"
    >{{$t('timeOut')}}</ion-row>

And this is a child component. The 'trySpeak' function is a function in TTS that was imported by the parent component.


Solution

  • No, you would need to either pass as a prop or import directly into child component. With that said there are not recommended ways such as $parent but I would stay away from that. See here for more info: https://v2.vuejs.org/v2/guide/components-edge-cases.html