Vue.js 将数据传递到vue组件

我现在正在学习Vue.js，但我在理解一项相当简单的任务时遇到了一个小问题（可能是我的编程思想太老了）。
我用这段代码创建了一个小组件

<template>
    <div class="tabSelectorRoot">
        <ul>
            <li v-for="(element,index) in elements" v-on:click="changeSelected(index)">
                <a :class="{ 'selected': activeIndex === index }" :data-value="element.value"> {{ element.text }}</a>
            </li>
        </ul>
        <div class="indicator"></div>
    </div>
</template>

<script>
    export default {
        name: "TabSelectorComponent",
        data () {
            return {
                activeIndex : 0,
                elements: [
                    { 'text':'Images', 'value': 'immagini','selected':true},
                    { 'text':'WallArts', 'value': 'wallart'}
                ]
            }
        },
        created: function () {
        },
        methods: {
            'changeSelected' : function( index,evt) {
                if ( index == this.activeIndex) { return; }
                this.activeIndex = index;
                document.querySelector('.indicator').style.left= 90 * index +'px';
                this.$emit('tabSelector:nameChanged',)
            }
        }
    }
</script>

我希望通过改变列表中对象的数量来重用该组件，但我不知道如何完成这项简单的任务。Vue中组件之间通信的基本方式是使用属性和事件。在您的情况下，您需要做的是将一个
elements
属性添加到父级设置的
选项卡SelectorComponent

选项卡选择器组件

export default {
  name: "TabSelectorComponent",
  props: ["elements"],
  data () {
    return {
      activeIndex : 0
    }
  },
  ...
}

在您的家长中：

<tab-selector-component :elements="elementArray"></tab-selector-component>



这在
选项卡Selector Component
的
元素
数组中作为
prop
传递的@伯特：你说得对，谢谢。你能回答这个问题而不是评论它，这样我就可以标记为接受了吗？我已经添加到数据中，只是为了清楚那里不再需要数组。请检查它是否符合您的意图。
<tab-selector-component :elements="elementArray"></tab-selector-component>