vue.js 父組件的 data 傳遞給子組件時(shí)，只能獲取到 this 而無(wú)法獲取到 this.xxx 屬性。

問(wèn)題描述

父組件中，在 methods、created 、mounted中都可以獲取到 this 以及其屬性但在 data 中傳遞時(shí)只能獲取 this 實(shí)例而無(wú)法獲取 this.xxx 屬性。

相關(guān)代碼

父組件結(jié)構(gòu)代碼

<form-component :form="merchantAddForm"
                :formItems="merchantAddFormItems"
                @on-form-submit="handleFormSubmit"
                @on-select-change="handleLevel1Change">

父組件方法代碼

data () {
    return {
      merchantAddForm: {
        token: this.$route.params.token,
        merType: 1,
        merCertType: ''

      },
      sortList: [
        { value: 32, label: '商旅' },
        { value: 33, label: '商旅' },
        { value: 34, label: '商旅' }
      ],
      merchantAddFormItems: [
        {
          label: '商戶一級(jí)分類',
          prop: 'merLevel1No',
          placeholder: '請(qǐng)選擇商戶一級(jí)分類',
          type: 'select',
          options: this.sortList,//這里只能傳遞 this 而無(wú)法獲取并傳遞 this 的任何屬性
          rules: [{ required: true, message: '請(qǐng)選擇商戶一級(jí)分類', trigger: 'change' }]
        }
      ]
    }
}

子組件結(jié)構(gòu)代碼

<el-select v-else-if="item.type === 'select'"
           v-model="form[item.prop]"
           :placeholder="item.placeholder"
           @change="handleSelectChange"
           filterable>

    <template v-for="(child, index) in item.options">
        <!-- 這里獲取不到任何數(shù)據(jù)，item.options 為 undefined -->
        <el-option :key="index"
                   :label="child.label"
                   :value="child.value">
        </el-option>
    </template>
</el-select>

實(shí)際需求 sortList 為動(dòng)態(tài)賦值，上面的假數(shù)據(jù)只是為了模擬。

 methods: {
    getInitData () {
      let findSortData = {
        type: 0,
        parentId: null
      }
      findSort(findSortData).then(res => {
        if (res.data.object) {
          let resArray = []
          res.data.object.forEach(item => {
            let obj = {
              label: item.sortName,
              value: item.sortCode
            }
            resArray.push(obj)
          })
          this.sortList = resArray
        }
      })
    }
}

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

在子組件 created 以及 mounted 時(shí) console 出來(lái)的值都為 undefined

請(qǐng)教大佬解決思路以及 why？不勝感謝

回答

編輯回答

柒喵

原因簡(jiǎn)單的來(lái)說(shuō)就是，Vue會(huì)在某個(gè)周期里把data對(duì)象的各個(gè)屬性掛載在this（Vue實(shí)例）上。所以，在data函數(shù)創(chuàng)建過(guò)程中，無(wú)法通過(guò)this（Vue實(shí)例）訪問(wèn)data上的屬性，所以你的this上沒有sortList屬性。

具體修改辦法：
修改父組件的data函數(shù)，參考偽代碼

data() {
    const sortList = [xxx,xxx,xxx]
    return {
        sortList: sortList,
        merchantAddFormItems: [
           xxxxx,
           options: sortList
        ]
    }
}

2018年3月1日 12:36