vue+elementUI问题

Question

// 引入子组件

    <st-input
                class="dict-input"
                :dropDownListData="dropDownListData"
                placeholder="选择类型查询"
                :value.sync="value"
                icon="caret-right">
        </st-input>

// 子组件
<div id="st-input-component">

    <div class="my-input">
        <el-autocomplete
                :icon="icon"
                v-model="currentValue"
                :fetch-suggestions="querySearchAsync"
                :placeholder="placeholder"
                @select="handleSelect"
                :value="currentValue"
                :dropDownListData="dropDownListData"
                :trigger-on-focus="isShowList"
        ></el-autocomplete>

    </div>
</div>

// 子组件代码
Vue.component('st-input', {

    template: '#st-input-component',
    data: function () {
        return {
            dropDownListInfo: [],
            timeout: null,
            currentValue: this.value,
            isShowList: true
        }
    },
    props: {
        placeholder: String,
        icon: {
            type: String,
            default: function () {
                return ''
            }
        },
        dropDownListData: {
            type: Array,
            default: function () {
                return []
            }
        },
        value: {
            type: [Number, String],
            default: function () {
                return ''
            }
        }
    },
    watch: {
        currentValue: function(value) {
            this.$emit('update:value', value);
        },
        dropDownListData: function (value) {
            console.log(value);
        }
    },
    mounted: function () {
        console.log(this.placeholder);
        console.log('dropDownListData' + this.dropDownListData); // 为什么这里是undefined
    },
    methods: {
        querySearchAsync: function(queryString, callback) {
            var dropDownLosData = this.dropDownListInfo;
            var resultData = queryString ? dropDownLosData.filter(this.createStateFilter(queryString)) : dropDownLosData;

            clearTimeout(this.timeout);

            this.timeout = setTimeout(function () {
                callback(resultData);
            }, 100 * Math.random());

        },
        createStateFilter: function(queryString) {
            return function(state) {
                return (state.value.indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect: function (item) {
            console.log(item);
            this.isShowList = true;
        }
    }

});

new Vue({
    el: '#st-dict-page',
    data: {
        value: '',
        dropDownListData: [
            { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
            { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
            { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" }
        ]
    },
    computed: {
    },
    mounted: function() {
        console.log(this.dropDownListData);
    },
    methods: {
      
    }

})

为什么在子组件中的mounted方法里打印this.dropDownListData为undefined,父组件的值没穿过来,为什么呢,哪里有错误?

Answer 1

这里的 dropDownListData 改成 drop-down-list-data试试

Answer 2

用computed转换下