帶有動態模板的 Vue.js 組件（例如事件處理程序）

Question

假設我制作了一個名為 test 的組件並將其插入到我的 html 中，如下所示：

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

如何實現單擊屬性值更改為屬性值“數據”？

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 :)

Answer 1

家長：

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

子組件：

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

見文檔

根據您的編輯：

//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>