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 从子组件向父组件发出事件的主要内容,如果未能解决你的问题,请参考以下文章

Vuejs 中从子级到父级的事件监听

发出的事件不会调用 Vue JS 组件中的父方法

从动态创建的子组件向父组件发出事件

从结构指令向父组件发出事件不起作用

Vue.js - 如何在数据对象更改时向父组件发出?

如何在 Vue 中向父布局槽发出事件?