Привет.
Как понять такую логику, что внутри компонента blog-post генерируется событие:
<button v-on:click="$emit('enlarge-text')"
Но до верхнего компонента оно само не поднимется.
Надо обязательно НА НЕМ же и ловить и отправлять выше
<blog-post v-bind:title="title" v-on:enlarge-text="methodClick1" />
methods: {
methodClick1: function(){
this.$emit('enlarge-text');
}
}
Чем такая логика может быть объяснена?
Вот полный код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="resources/vue/vue.js"></script>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:style="{ fontSize: postFontSize + 'em' }">
<main-content :title="title" v-on:enlarge-text="postFontSize += 0.1"></main-content>
</div>
</div>
</body>
<script>
Vue.component('blog-post', {
props: ['title'],
template:
`<div>
<h3>{{ title }}</h3>
<button v-on:click="methodConsole">Консоль</button>
<button v-on:click="$emit('enlarge-text')">Увеличить размер текста</button>
</div>`,
data: function(){
return {
};
},
methods: {
methodConsole: function(){
console.log(this.title);
console.log(this);
}
}
})
Vue.component('main-content', {
props: ['title', 'prop2'],
template:
`<div>
<blog-post v-bind:title="title" v-on:enlarge-text="methodClick1" />
<!-- просто нельзя оставить
<blog-post v-bind:title="title" />
-->
</div>`,
methods: {
methodClick1: function(){
//console.log(this.title);
//console.log(this);
this.$emit('enlarge-text');
}
}
});
var app = new Vue({
el: "#app",
components: {},
data() {
return {
postFontSize: 1,
title: 'my title 2',
}
},
methods: {
reduceText: function($event) {
this.postFontSize -= $event;
}
}
});
</script>
</html>