【问题标题】：Vue emit event from child to parentVue 将事件从子级发送到父级
【发布时间】：2023-03-03 10:04:02
【问题描述】：

不太清楚为什么这不起作用，因为我阅读的所有示例都以相同的方式进行。

Parent.vue

<tree-select class="ml-5 tree-select"
             :nodes="all"
             :value="data"
             @tree-item:clicked="updateParent($event)"></tree-select>

TreeSelect.vue

<template>
    <p class="tree-select__item">
        <span v-if="data" @click="$emit('tree-item:clicked', 0)">

updateParent: function(event) {
   console.log(event);
},

我的updateParent 方法只是控制台记录事件。 Chrome 的 Vue 插件看到了该事件，但是我没有得到控制台日志。

编辑

将事件从 tree-item.clicked 更改为 tree-item:clicked。

编辑 2

Parent.vue

<tree-select class="ml-5 tree-select"
             :nodes="all"
             :value="data"
             @tree-item-clicked="updateParent"></tree-select>

TreeSelect.vue

<template>
    <p class="tree-select__item">
        <span v-if="data" @click="$emit('tree-item-clicked', 0)">

【问题讨论】：

哪个示例显示您在事件名称中使用连字符和点？
@MatJ 认为连字符或点不会有什么不同，我只是喜欢这个命名。
@MatJ 刚把tree-item.clicked改成test还是不行。
在 Vue 中，dot 是修饰符，hypen 是大写替换。因此，如果您的事件名称是 TreeItemClicked，您应该绑定到 html 中的tree-item-clicked，因为 html 对属性名称不区分大小写。事件名称中不能既没有点也没有连字符。
好的，按照建议进行了上述更改，仍然没有运气！ ://

标签： vue.js

【解决方案1】：

问题似乎是由于它是一个递归组件，不知道为什么我不能从任何地方发出。

- Parent.vue // Handler here
-- TreeSelect.vue // Works here
--- TreeSelect.vue // Doesn't work
--- TreeSelect.vue // Doesn't work
---- TreeSelect.vue // Doesn't work

这就是我所做的：

Parent.vue

<tree-select class="ml-5 tree-select"
             :nodes="all"
             :value="data"
             :handle-click="updateParent"></tree-select>

TreeSelect.vue

<template>
    <p class="tree-select__item">
        <span @click="handleClick(data)" v-if="data" :class="{ active: data.parent_id === value.parent_id }">
            <i :class="data.icon"></i> {{ data.label }}
        </span>
        <tree-select v-for="node in nodes"
                     :nodes="node.nodes"
                     :indent="indent+1"
                     :value="value"
                     :key="`${node.label}-key`"
                     :handle-click="handleClick"
                     :data="node">
        </tree-select>
    </p>
</template>
<script>
    export default {
        props: {
            data: {},
            nodes: {},
            indent: {
                default:-1
            },
            value: {},
            handleClick: Function
        }
    }
</script>

【讨论】：