Пишу функцию для библиотечной компоненты

Question

Являюсь студентом, не так давно начал программировать на vue3. Пишу библиотеку компонентов и столкнулся с такой проблемой. Нужна функция для дочернего компонента, которую можно будет вызвать при монтировании в родительском.

Условный пример, как это должно работать:

Дочерний компонент:

<template>
  <button @click="testFunc(a,b,c)">test</button>
</template>
<script lang="js">
export default {
name: "testComponent",
  methods:{
    testFunc(a,b,c){
      a+=4;
      b*=4;
      c-=4;
      console.log(a,b,c);
    }
  },
};
</script>

Родительский компонент:

<template>
  <Test
   testFunc="1,2,3"
   />
</template>
<script lang="js">
import Test from "@/components/testComponent.vue"
export default{
components:{
  Test,
 }
}
</script>

Через $emit делал. Конструкция вида в дочернем $emit="testFunc", а в родительском @testFunc="someFunction", не подходит под критерии к заданию. Нужно чтобы можно было у компоненты вызвать метод с атрибутами.

Подскажите как действовать в такой ситуации. Может есть решение, или что почитать?

Заранее спасибо!

Answer 1

Не совсем понятно как вы пытались использовать $emit, но, похоже, что как-то не так. https://ru.vuejs.org/v2/api/#vm-emit

Попробуйте это:

Child.vue

<script>
export default {
  //...
  mounted() {
    this.$emit('event', 1, 2 ,3);
  }
  //...
}
</script>

Parent.vue

<template>
  <Child @event="handler">
<template>

<script>
export default {
  methods: {
    handler(a, b, c) {
      console.log(a - b + c);
    },
  }
}
</script>

P. S. Для форматирования кода (красивый код автоматически) советую установить это: https://prettier.io/

БЛОГ НА HUSL

Пишу функцию для библиотечной компоненты

Ответы (1 шт):