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