父组件ajax数据传递给子组件,[转]详解vue父组件传递props异步数据到子组件的问题...

案例一

父组件parent.vue

// asyncData为异步获取的数据，想传递给子组件使用

父组件

import child from './child'

export default {

data: () => ({

asyncData: ''

}),

components: {

child

},

created () {

},

mounted () {

// setTimeout模拟异步数据

setTimeout(() => {

this.asyncData = 'async data'

console.log('parent finish')

}, 2000)

}

}

子组件child.vue

子组件{{childData}}

export default {

props: ['childData'],

data: () => ({

}),

created () {

console.log(this.childData) // 空值

},

methods: {

}

}

上面按照这里的解析，子组件的html中的{{childData}}的值会随着父组件的值而改变，但是created里面的却不会发生改变(生命周期问题)

案例二

parent.vue

父组件

import child from './child'

export default {

data: () => ({

asyncObject: ''

}),

components: {

child

},

created () {

},

mounted () {

// setTimeout模拟异步数据

setTimeout(() => {

this.asyncObject = {'items': [1, 2, 3]}

console.log('parent finish')

}, 2000)

}

}

child.vue

子组件

{{childObject.items[0]}}

export default {

props: ['childObject'],

data: () => ({

}),

created () {

console.log(this.childObject) // 空值

},

methods: {

}

}

created里面的却不会发生改变， 子组件的html中的{{{childObject.items[0]}}的值虽然会随着父组件的值而改变，但是过程中会报错

// 首先传过来的是空，然后在异步刷新值，也开始时候childObject.items[0]等同于''.item[0]这样的操作，

所以就会报下面的错

vue.esm.js?8910:434 [Vue warn]: Error in render function:

"TypeError: Cannot read property '0' of undefined"

针对二的解决方法：

1、使用v-if可以解决报错问题，和created为空问题

// parent.vue

父组件

import child from './child'

export default {

data: () => ({

asyncObject: '',

flag: false

}),

components: {

child

},

created () {

},

mounted () {

// setTimeout模拟异步数据

setTimeout(() => {

this.asyncObject = {'items': [1, 2, 3]}

this.flag = true

console.log('parent finish')

}, 2000)

}

}

//child.vue

子组件//不报错

{{childObject.items[0]}}

export default {

props: ['childObject'],

data: () => ({

}),

created () {

console.log(this.childObject)// Object {items: [1,2,3]}

},

methods: {

}

}

2、子组件使用watch来监听父组件改变的prop，使用methods来代替created

子组件

{{test}}

export default {

props: ['childObject'],

data: () => ({

test: ''

}),

watch: {

'childObject.items': function (n, o) {

this.test = n[0]

this.updata()

}

},

methods: {

updata () { // 既然created只会执行一次，但是又想监听改变的值做其他事情的话，只能搬到这里咯

console.log(this.test)// 1

}

}

}

3、子组件watch computed data 相结合，有点麻烦

子组件

{{test}}

export default {

props: ['childObject'],

data: () => ({

test: ''

}),

watch: {

'childObject.items': function (n, o) {

this._test = n[0]

}

},

computed: {

_test: {

set (value) {

this.update()

this.test = value

},

get () {

return this.test

}

}

},

methods: {

update () {

console.log(this.childObject) // {items: [1,2,3]}

}

}

}

4、使用emit，on，bus相结合

子组件

{{test}}

export default {

props: ['childObject'],

data: () => ({

test: ''

}),

created () {

// 绑定

this.$bus.on('triggerChild', (parmas) => {

this.test = parmas.items[0] // 1

this.updata()

})

},

methods: {

updata () {

console.log(this.test) // 1

}

}

}

这里使用了bus这个库，parent.vue和child.vue必须公用一个事件总线(也就是要引入同一个js，这个js定义了一个类似let bus = new Vue()的东西供这两个组件连接)，才能相互触发

5、使用prop default来解决{{childObject.items[0]}}

父组件

import child from './child'

export default {

data: () => ({

asyncObject: undefined // 这里使用null反而报0的错

}),

components: {

child

},

created () {

},

mounted () {

// setTimeout模拟异步数据

setTimeout(() => {

this.asyncObject = {'items': [1, 2, 3]}

console.log('parent finish')

}, 2000)

}

}

子组件

{{childObject.items[0]}}

export default {

props: {

childObject: {

type: Object,

default () {

return {

items: ''

}

}

}

},

data: () => ({

}),

created () {

console.log(this.childObject) // {item: ''}

}

}