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

当它似乎存储在子 QueueOne (Q1) 组件（指向 VueX 存储）中时，您正尝试访问 RepConfig 组件中的值 dscpValuesQ1。默认情况下，父组件无权访问其子组件的数据。

您可以通过向父组件添加相同的 VueX 连接并以这种方式获取值来访问数据，或者通过在父组件的模板中为子组件添加 ref，并在父组件上监视更改在您的子组件上 (as answered 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>