Javascript @单击事件不'；t起作用，而.native赋予父项相同的值

我正在使用VueJs处理一个小项目（文件浏览器），我的代码中有一个问题，实际上在

@click=“open”

中它不起作用。可能是因为父级

DIV

，我尝试了

@click.native

，但我总是得到相同的值这是我的代码：

<template>
    <div class="folder">
        <div @click="init" :style="{'margin-left': `${depth * 10}px`}">
            <span v-if="hasChilden">
                <i class="fas font-size-16 text-warning" :class="(expanded == true) ? 'fa-folder-open' : 'fa-folder'"></i>
            </span>
            {{node.name}}
        </div>
        <template v-for="child in node.children">
            <tree-browser v-if="expanded" @click="open" :depth="depth + 1" :node="child" :key="child.id"/>
        </template>
    </div>
</template>

<script>
export default {
    name: 'treeBrowser',
    props: {
        node: Object,
        depth: {
            type: Number,
            default:0
        }
    },
    data(){
        return {
            expanded: false,
        }
    },
    computed:{
        hasChilden(){
            return this.node.children;
        }
    },
    methods:{
        init(){
            this.expanded = !this.expanded 
        },
        open: function(e){
           this.$emit('do', this.node)
        }
    }
}
</script>

<style scoped>
.folder{
    cursor: pointer;
}
</style>

{{node.name}
导出默认值{
名称：'treeBrowser'，
道具：{
节点：对象，
深度：{
类型：数字，
默认值：0
}
},
数据（）{
返回{
扩展：错，
}
},
计算：{
hasChilden（）{
返回this.node.children；
}
},
方法：{
init（）{
this.expanded=！this.expanded
},
开放：功能（e）{
this.$emit（'do'，this.node）
}
}
}
.文件夹{
光标：指针；
}

使用任何父标记（如

div）进行包装应该可以工作

    <template v-for="child in node.children">
        <div @click="open">
           <tree-browser v-if="expanded" :depth="depth + 1" :node="child" :key="child.id"/>
        </div>
    </template>



您应该在本机标记（如
div
）上放置任何事件，而不是在任何组件标记中，支持标记（如
tree browser
），
template
在呈现到DOM之前移除。
方法
open
正在向父组件发送，可能是父组件上的问题，尝试
控制台。在父
@do
事件和子
打开
方法上记录一些内容<代码>树浏览器
是一个组件，因此您一定要使用
@click.native
@localdev我尝试过，但问题相同现在单击时，我在控制台中获得树对象（就像我在单击根一样）确定将此方法放入组件内的本机根标记中