使用 Vue.js 访问具有相同根目录的组件之间的数据

Question

我正在尝试根据不同组件中发生的操作来扩展一个组件中的数据。

例如，在一个组件中，我有一组在 v-for 循环中渲染的对象，该数组是数据的一部分：

<template lang="html">
    <div class="calendar">
        <div class="calendar-header  row">
            <div class="col-sm-2 centered">
                <i class="fa fa-fw fa-chevron-left" @click="subtractWeek"></i>
            </div>
            <div class="col-sm-1 centered" v-for="(day, key, index) in days" data-date="">{{day}}<br>{{daysInWeek[key]}}</div>
            <div class="col-sm-2 centered">
                <i class="fa fa-fw fa-chevron-right" @click="addWeek"></i>
            </div>
            <div class="col-sm-1 centered">
                &nbsp;
            </div>
        </div>
        <div class="calendar-header row" v-for="task in tasksRows">
            <div class="col-sm-2 centered">{{task.name}}</div>
            <div class="col-sm-1 centered" v-for="(day, key, index) in days">
                <input style="width:100%;" type="text" :id="task.id" :data-date="daysInWeek[key]" value="" />
            </div>
            <div class="col-sm-2 centered">X</div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            today: moment(),
            dateContext: moment(),
            days: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            tasksRows: [
                {"name": "1 task",  "id": 10 },
                {"name": "2 task",  "id": 20 }
            ]
        }
    },

    computed: {
        year: function () {
            var t = this;
            return t.dateContext.format('Y');
        },
        month: function () {
            var t = this;
            return t.dateContext.format('MMMM');
        },
        currentDate: function () {
            var t = this;
            return t.dateContext.get('date');
        },
        daysInWeek: function() {
            var t = this;
            var x = moment(t.dateContext).startOf('week');
            var days = [];
            days.push(x.get('year')+"-"+("0"+(parseInt(x.get('month'))+1)).slice(-2)+"-"+("0"+x.get('date')).slice(-2));
            for(var c=1;c<=6;c++) {
                x.add(1, 'days');
                days.push(x.get('year')+"-"+("0"+(parseInt(x.get('month'))+1)).slice(-2)+"-"+("0"+x.get('date')).slice(-2));
            }
            console.log(days);
            return days;
        },
        firstDayOfWeek: function () {
            var t = this;
            console.log(moment(t.dateContext).day());
            return moment(t.dateContext).startOf('week');
        },
        initialDate: function () {
            var t = this;
            return t.today.get('date');
        },
        initialMonth: function () {
            var t = this;
            return t.today.format('MMMM');
        },
        initialYear: function () {
            var t = this;
            return t.today.format('Y');
        }
    },

    methods: {
        addWeek: function () {
            var t = this;
            t.dateContext = moment(t.dateContext).add(1, 'week');
        },
        subtractWeek: function () {
            var t = this;
            t.dateContext = moment(t.dateContext).subtract(1, 'week');
        }
    }
}

注意tasksRows这是我想从不同的地方动态扩展的数组。 另一个组件是表单。 我希望它们共享相同的根。

我想要的是从表单提交后，将另一个条目添加到数组中，然后我的第二个模板应该根据数据进行更新。

Answer 1

您应该使用父组件处理修改和存储 taskRows，并通过道具将其传递给您的组件。 例如

{
      template: `
        <div>
           <task-list :tasks-rows="tasksRows" />
           <form-component @add="add />
        </div>`,
        data(){
          return {
               taskRows: []
          }
        },
    
        methods: {
          add(name, id){
             this.taskRows.push({name, id})
          }
        }
    }

或者您可以使用事件总线进行非父子通信https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication