Question

我现在正在学习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>

这是根

<template>
  <div id="app">
    <tab-selector-component></tab-selector-component>
  </div>
</template>

<script>
import TabSelectorComponent from "./TabSelectorComponent";
export default {
    name: 'app',
    components: {TabSelectorComponent},
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },
    'mounted' : function() {
        console.log(this)
        //EventManager.eventify(this,window.eventManager);
        /*this.register('tabSelector:changeValue',function(el){
            console.log(el);
        });*/
    }
}
</script>

所有这些都以这样的方式呈现

我想通过更改列表内的对象数量来重用该组件，但我不明白如何完成此简单任务

Answer 1

Vue中组件之间进行通信的基本方式是使用属性和事件。对于您而言，您想做的是向由父母设置的elements中添加一个TabSelectorComponent属性。

TabSelectorComponent

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

在您的父母中：

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

documentation here中对此进行了说明。

将数据传递到vue组件

1 个答案: