Передача функций обратного вызова в компоненты

Последнее обновление: 29.09.2017

Функции обратного вызова представляют еще один способ взаимодействия между родительским и дочерним компонентами: родительские компоненты могут определять функции, а вызываются они в дочерних компонентах.

Например, определим следующую веб-страницу:

<!DOCTYPE html>
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
	<h2>Список пользователей</h2>
    <userform :addfn="add"></userform>
	<div>
		<useritem v-for="(user, index) in users" 
					:user="user" 
					:key="index"
					:index="index" 
					:removefn="remove">
		</useritem>
	</div>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
Vue.component('userform', {
	props: ["addfn"],
	data: function () {
		return {
			user: {name:'', age:18}
		}
	},
	template: `<div>
					<input type="text" v-model="user.name" />
					<input type="number" v-model="user.age" />
					<button  v-on:click="addfn({name:user.name, age: user.age})">Add</button>
				</div>`
});
Vue.component('useritem', {
	props: ["user", "index", "removefn"],
	template: `<div>
					<p>Name: {{user.name}} <br> Age: {{user.age}}</p>
					<button  v-on:click="removefn(index)">Delete</button>
				</div>`
});
new Vue({
    el: "#app",
    data: {
        users:[
			{name: 'Tom', age: 23},
			{name: 'Bob', age: 26},
			{name: 'Alice', age: 28}
		]
    },
	methods:{
		remove: function(index){
			this.users.splice(index, 1);
		},
		add: function(user){
			this.users.push(user);
		}
	}
});
</script>
</body>
</html>

Объект Vue выводит на страницу массив элементов и определяет два метода для управления элементами: add (для добавления) и remove (для удаления).

Для добавления нового элемента определен компонент userform, который представляет форму с полями ввода. В этот компонент передается метод add в виде функции addfn:

<userform :addfn="add"></userform>

Причем функция addfn определена в компоненте userform через props:

Vue.component('userform', {
	props: ["addfn"],

При нажатии на кнопку эта функция будет вызываться, и ей будут передаваться введенные данные. Что фактически приведет к вызову метода add в родительском объекте Vue.

Аналогичная ситуация с компонентом useritem, который получает метод remove в виде функции removefn, которая также определяется через props. При нажатии на кнопку удаления вызывается функция removefn, ей передается индекс удаляемого элемента, и фактически будет идти вызов метода remove из объекта Vue.

Таким образом, в самих дочерних компонентах никаких действий по управлению массивом и объектами и по генерации событий не определено. Дочерние компоненты просто вызывают те методы, которые определены в родительском объекте.

Добавление в массив в Vue.js

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850