Vue компонент имеет функцию @click="remove". Как обратиться к этой функции внутри главного vue?

Question

[ArtJH]

Vue.component('add-edu', {
	template: `
		<div class="gray_dashed">
			<i class="fas deleteForm fa-times" v-on:click="remove"></i>	
		</div>
`
});

new Vue({
	el: '.midMain',
  	data: {
  		mes: 'sds'
  	},
  	methods:{
  		remove: function() {
  			this.mes = 'Привет';
  		}
  	}
});

Проблема: кнопка не реагирует

Answer 1

[0xD34F]

Вам это не нужно. Генерируйте в дочернем компоненте событие, подписывайтесь на него в родительском и вызывайте в обработчике нужный метод.

Comments

[ArtJH]

можно пример кода, не понял что вы имеете ввиду

[0xD34F]

Обработчик клика в дочернем компоненте, кидаете событие:

<i @click="$emit('xxx')">

В родительском компоненте ловите событие:

<add-edu @xxx="remove">

Answer 2

[profcat]

В документации по ссылке всё написано в примере, смотри внизу.

https://ru.vuejs.org/v2/guide/list.html

Comments

[profcat]

з.ы. для этого надо еще прочитать https://ru.vuejs.org/v2/guide/components.html