Question

下面的代码会出错。

数据属性“ bg”已经声明为prop。使用道具默认值。

但是如您所见，道具不包含bg ...为什么会发生此错误？

<template>
    <div :class="[cls , colorFlag == true ? 'active':'']" :id="sid+'_box'" :style="{width: [width], height: [height], margin: [margin]}">
        <div class="colorBtn"  :style="{background:bg, color:col}" @click="colorOpen">a</div>
        <ul class="colorList">
            <li v-for="(cD, index) in defaultC" @click="changeColor($event,cD.bgF,cD.colF)" :style="{background:[cD.bgF], color:[cD.colF]}">a</li>
        </ul>
    </div>
</template>

<script>
    import mixin from '~/mixin/index.js'

    export default {
        name: "color",
        mixins: [mixin],
        props: {
            cls: {
                type: String,
                default: ''
            },
            val: {
                type: [String, Number, Boolean, Object],
                default: ''
            },
            sid: {
                type: String,
                default: ''
            },
            src: {
                type: String,
                default: ''
            }
        },
        data: () => ({
            fileName: '',
            fileSrc:'',
            colorFlag:false,
            defaultC:[
                {bgF:'#E7E7E7', colF:'#464646'},
                {bgF:'#B6CFF5', colF:'#0D3472'},
                {bgF:'#98D7E4', colF:'#0D3B44'},
                {bgF:'#E3D7E1', colF:'#3D188E'},
                {bgF:'#FBD3E0', colF:'#711A36'},
                {bgF:'#ffa333', colF:'#FFFFFF'},
            ],
            bg: '#FFC8AF',
            col: '#7A2E0B',

        }),
    }

这是调用组件的html

<color cls="fl colorBox" width="48px" height="26px" margin="0 38px 0 0" @fChange="config.bgcolor, config.bgcolor" />

Answer 1

问题在于bg是在mixin的道具中。

我不知道什么是mixin，现在我明白了为什么会出错。

谢谢。

数据属性“ bg”已经声明为prop。请改用prop默认值。但是，道具不包含“ bg”

1 个答案: