Недавно я начал работать с VueJS, я использую v3 и, похоже, у меня проблема с вызовом метода для родителя. Функция emit в дочернем элементе, похоже, не генерирует событие, и в родительском элементе ничего не происходит.
Я включил родителя и ребенка, чтобы показать, как я его настроил
Родитель
<template>
<First/>
< Child v-bind:sample="sample" @enlarge-text="onEnlargeText"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';
import First from './First.vue';
import Child from './Child.vue';
export default defineComponent({
name: 'Container',
components: {
First,
Child,
},
methods: {
onEnlargeText() {
console.log('enlargeText');
},
},
data: () => ({
sample: [],
parentmessage: '',
}),
created() {
axios.get('http://localhost:8080/getData')
.then((response) => {
console.log(response);
this.sample = response.data;
})
.catch((error) => {
console.log(error);
});
},
});
</script>
Ребенок
<template>
<div id="add">
<form id="signup-form" @submit.prevent="submit">
<label for="text">Text:</label>
<input type="text" v-model="text" required>
<p class="error" >{{ error }}</p>
<div class="field has-text-right">
<button type="submit" class="button is-danger">Submit</button>
</div>
</form>
<button v-on:click="tryThis">
Enlarge text
</button>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';
interface SampleInterface {
text: string;
error: string;
}
export default defineComponent({
name: 'Add',
data: (): AddInterface => ({
text: '',
error: '',
}),
methods: {
tryThis() {
this.$emit('enlarge-text');
},
submit() {
this.$emit('enlarge-text');
},
},
});
</script>
Как это сделать? Я что-то пропустил?
Мне было интересно, могу ли я использовать здесь $ emit?
