Как передать метод из родительского компонента в дочерний?

Question

[Артем Прохоров]

Vue.component('app-com', {
    props: ['user'],
    template: '<li>Имя: {{user.name}}, возраст: {{user.age}} <button v-on:click="al">Редактировать</button></li>',
});

let app = new Vue({
    el: '#app',
    data: {
        users: [
            {name: 'Коля', age: 30},
            {name: 'Вася', age: 40},
            {name: 'Петя', age: 50},
        ],
    },
    methods: {
        al: function() {alert('ok')},
    },
});

Как это сделать и если вариантов несколько, то какой будет самым грамотным?
В дочернем компоненте я указал al как функцию, мне просто нужно чтобы дочерний компонент ее увидел.

Comments

[Владимир Коротенко]

Это случаем не дубль?

[Артем Прохоров]

Владимир Коротенко, Нет это мой первый вопрос по vue

[Владимир Коротенко]

kotcich, итак смотрите в vuex хранится состояние, компоненты отображают этот сторадж, они «тупые» функции импортируются в компоненты по мере необходимости. Кстати и фильтры тоже. В сторадж храниться наиболее ясная информация, например дата а не строка. Всякие красивости только в конечный момент. Компонент только отображает и отправляет команды в сторадж что бы что то изменить

Answer 1

[0xD34F]

Точно так же, как и всё остальное - добавляете описание в props, используете v-bind для привязки функции к экземпляру дочернего компонента.

Но вообще, так в vue делать не принято.
Принято иначе:

1. В дочернем компоненте генерируете событие: <button @click="$emit('click')".
2. В родительском на него подписываетесь: <component @click="onClick".

Хотя, конечно, чисто технически это тоже будет передачей функции - назначенные в родителе обработчики событий доступны в дочернем компоненте через свойство $listeners, так что вместо $emit('click') или (если надо передать родителю какие-то данные) $emit('click', аргумент) можно (но не нужно) написать $listeners.click или $listeners.click(аргумент).

Answer 2

[Артем Прохоров]

Крч, меня не особо поняли(написал я вроде все ясно), но решил сам.
Проблема в том, что при v-bind:somecode в вашем представлении(если вы в фреймворке работает) или обычном index.php где у вас разметка при написании названия функции со скобками, вот такv-bind:ale=al() ваш код выполнится сразу по заходу на страницу и выполнится несколько раз, если он выполняется в v-for цикле.

Исправить можно просто убрав () скобки в привязке метода и тогда все будет хорошо.
Если же вам нужно будет передать параметры данной функции, то передать их нужно будет уже в коде компонента в js файле(там кавычки писать можно и передавать параметры тоже).

Вот мой конечный код:

Код из файла где будет ваша разметка

<div id = 'app'>
        <app-com v-for = 'user in users' :user = 'user' :ale="al"></app-com>
</div>

И сам JS:

Vue.component('app-com', {
    props: ['user', 'ale'],
    template: '<li>Имя: {{user.name}}, возраст: {{user.age}} ' +
        '<button v-on:click="ale(user.name)">Редактировать</button></li>',
});

let app = new Vue({
    el: '#app',
    data: {
        users: [
            {name: 'Артем', age: 20},
            {name: 'Андрей', age: 22},
        ],
        postFontSize: 1,
    },
    methods: {
        al: function(value) {alert(value)},
    },
});

Comments

[0xD34F]

Крч, меня не особо поняли(написал я вроде все ясно)

Да, ясно. Для телепатов.

Сколько информации сообщили - на столько вам и ответили. То, что вы испытываете затруднения с определением, где вызов функции, а где просто ссылка на неё - этого из текста вопроса понять нельзя.

Answer 3

[Владимир Коротенко]

Не передавайте это плохо