kotcich
@kotcich

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

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 как функцию, мне просто нужно чтобы дочерний компонент ее увидел.
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
kotcich
@kotcich Автор вопроса
Крч, меня не особо поняли(написал я вроде все ясно), но решил сам.
Проблема в том, что при 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)},
    },
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
0xD34F
@0xD34F Куратор тега Vue.js
Точно так же, как и всё остальное - добавляете описание в props, используете v-bind для привязки метода к экземпляру компонента.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы