Vuejs 3 从子组件向父组件发出事件
Posted
技术标签:
【中文标题】Vuejs 3 从子组件向父组件发出事件【英文标题】:Vuejs 3 emit event from child to parent component 【发布时间】:2021-02-12 18:20:24 【问题描述】:我最近开始使用 VueJS,我正在使用 v3,并且似乎在调用父级方法时遇到了问题。 child 中的 emit 函数似乎没有发出事件,并且 parent 中没有任何内容。
我已经包含了父母和孩子,以展示我是如何设置它的
家长
<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
吗?
【问题讨论】:
控制台有错误吗? @BoussadjraBrahim 不幸的是,控制台中没有出现错误 您能否用您的代码丰富此代码框example 以便对其进行调试 我已经丰富了这个例子。它现在包含一个显示按钮的容器。然后,当您按下按钮时,它应该为在父容器中收到的事件输出一个日志行。代码沙盒:codesandbox.io/s/vue-3-ts-forked-gnlen 好,给我一些时间调试一下 【参考方案1】:您应该添加包含发出事件名称的新 emits option
:
孩子:
<template>
<div id="child">
<button v-on:click="tryThis">Enlarge text</button>
</div>
</template>
<script lang="ts">
import defineComponent from "vue";
export default defineComponent(
name: "Child",
emits: ["enlargeText"],
methods:
tryThis()
console.log("trying");
this.$emit("enlargeText", "someValue");
,
,
);
</script>
家长:
<template>
<div>
<p>Container</p>
<Child @enlargeText="onEnlargeText" />
</div>
</template>
<script lang="ts">
import defineComponent from "vue";
import Child from "./Child.vue";
export default defineComponent(
name: "UrlContainer",
components:
Child,
,
methods:
onEnlargeText()
console.log("enlarging text");
,
,
);
</script>
LIVE DEMO
【讨论】:
我在演示中运行了这个,我没有看到 onEnlargeText 函数的“放大文本”输出。我认为这应该在这里输出? 它适用于camelCase
格式请检查此codesandbox.io/s/vue-3-ts-forked-3kg1q?file=/src/components/…
我没有投反对票,别担心你帮了大忙!为什么这需要驼峰式?在文档中说它应该是事件名称大小写?
我知道你没有这样做,我认为这是一个错误,我发布了这个 answer,我建议使用 cabeb-case
,但是当我尝试使用 vue 3 时它没有工作
这是我发布的issue以上是关于Vuejs 3 从子组件向父组件发出事件的主要内容,如果未能解决你的问题,请参考以下文章