Vue：實例上未定義屬性或方法

Question

我有 2 個組件（Q1 和 RepConfig）。 我正在嘗試在 RepConfig 中導入 Q1 組件，以便我可以一遍又一遍地使用它。 Q1 組件指向一個帶有簡單數組的 Vue 存儲 (dscpValues.js)：

export default {
    namespaced: true,
    state: {
        dscpData: [
            { id: 'cs0', value: 'CS0' },
            { id: 'cs1', value: 'CS1' },
            { id: 'cs2', value: 'CS2' },
            { id: 'cs3', value: 'CS3' },
            { id: 'cs4', value: 'CS4' },
            { id: 'cs5', value: 'CS5' },
            { id: 'cs6', value: 'CS6' },
            { id: 'cs7', value: 'CS7' }
        ]
    }
};

Q1 組件：

<template>
    <div>
        <ul v-for="(option, index) in dscpValues.dscpData" :key="index">
            <li>
                <input type="checkbox" class="inputMarginRight" :id="option.id" :value="option.value" v-model="dscpChoiceQ1" />
                <label for="id">{{ option.value }}</label>
            </li>
        </ul>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { ref, computed } from '@vue/composition-api';

export default {
    computed: {
        ...mapState(['dscpValues'])
    },
    setup() {
        const dscpChoiceQ1 = ref([]);
        const dscpValuesQ1 = computed({
            get: () => {
                const v = dscpChoiceQ1.value;

                return v.join(' ');
            },
            set: (newval) => {
                dscpChoiceQ1.value = newval;
            }
        });

        return {
            dscpChoiceQ1,
            dscpValuesQ1
        };
    }
};
</script>

RepConfig 組件：

<template>
    <div>
        <queue-one></queue-one>
    </div>
    <span>{{ dscpValuesQ1 }}</span>
</template>

<script>
import QueueOne from './QueueNumber/Q1';

export default {
    components: {
        QueueOne
    }
}
</script>

我得到“方法或屬性 dscpValuesQ1 未在實例上定義，但在渲染期間引用”。 我究竟做錯了什么？

Answer 1

您正在嘗試訪問dscpValuesQ1組件中的 dscpValuesQ1 值，但它似乎存儲在子 QueueOne (Q1) 組件（指向 VueX 存儲）中。 默認情況下，父組件無權訪問其子組件的數據。

您可以通過向父組件添加相同的 VueX 連接並以這種方式獲取值來訪問數據，或者通過在父組件的模板中為子組件添加 ref 來訪問數據，並在父組件上使用 watch 來監視子組件的更改組件（ 如回答here ）。 例如：

<template>
    <div>
        <queue-one ref="q1"></queue-one>
    </div>
    <span>{{ dscpValuesQ1 }}</span>
</template>

<script>
import QueueOne from './QueueNumber/Q1';

export default {
    components: {
        QueueOne
    },

    mounted() {
        this.$watch("$refs.q1.dscpValuesQ1", (new_value, old_value) => {
            // Store data in this (parent) component
        }
    }
}
</script>