带有动态模板的 Vue.js 组件（例如事件处理程序）

Posted 2023-02-23

【中文标题】带有动态模板的 Vue.js 组件（例如事件处理程序）

【英文标题】：Vue.js component with dynamic template (e.g. eventhandler)

【发布时间】：2018-02-20 12:22:48

【问题描述】：

假设我制作了一个名为 test 的组件并将其插入到我的 html 中，如下所示：

<test :data="foo"></test>

如何实现点击属性值变为属性值'data'？

Vue.component('test', 
props: ['data'],
template: '<div v-for="element in foo" >></div>'
);

---

只是为了概述我的期望 - 这就是我正在寻找的：

<test :data="bar"></test>
<test :data="hello"></test>

呈现给

<div v-for="element in bar" ></div>
<div v-for="element in hello" ></div>

顺便说一句：感谢大家在这里参与 SO :)

【参考方案1】：

家长：

<test :data="foo" @onMyEvent="data=$event"></test>

子组件：

Vue.component('test', 
    props: ['data'],
    template: '<div @click="$emit(\'onMyEvent\', \'bar\')"></div>'
);

见DOCS

根据您的编辑：

//Parent
<template>
    <div>
        <test :data="foo"></test>
        <test :data="bar"></test>
        <!-- or -->
        <test v-for="item in [foo, bar]" :data="item"></test>
    </div>
</template>
<script>
    import Test from './Test.vue'
    export default
        data()
            return 
                foo: ['foo-0', 'foo-1', 'foo-2', 'foo-3'],
                bar: ['bar-0', 'bar-1', 'bar-2', 'bar-3'],
            
        ,
        components: 
            test: Test
        
    
</script>
//Child component
<template>
    <div>
        <div v-for="element in data"> element </div>
    </div>
</template>
<script>
    export default
        props: ['data'],
    
</script>

【讨论】：

感谢您的回答，但我不想在点击时更改 :data 值。我正在寻找一种在调用模板时重用 :data 的方法。请查看我编辑后的预期。

您不能在模板根目录中使用v-for，但这是允许的template: '<div><div v-for="..." ></div><div>' @j.mueller