代码之家 › 专栏 › 技术社区 › Tiziano

将数据传递到vue组件

vue.js

1

Tiziano · 技术社区 · 7 年前

我用这个代码创建了一个小组件。

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

所有这些都呈现出这样的效果

我想通过改变列表中对象的数量来重用组件,但是我不知道如何完成这个简单的任务

1 回复 | 直到 7 年前

1

a--m 7 年前

Vue中组件之间通信的基本方式是使用属性和事件。在您的情况下,您要做的是添加一个 elements 你的财产 TabSelectorComponent

TabSelector组件

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

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

这包括在 documentation here .