vue watch 发送数据到子组件_详解vue父组件传递props异步数据到子组件的问题

案例一

父组件parent.vue

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

父组件

data: ()=>({

asyncData:‘‘}),

components: {

child

},

created () {

},

mounted () {//setTimeout模拟异步数据

setTimeout(() =>{this.asyncData = ‘async data‘console.log(‘parent finish‘)

},2000)

}

}

子组件child.vue

子组件{{childData}}

props: [‘childData‘],

data: ()=>({

}),

created () {

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

},

methods: {

}

}

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

案例二

parent.vue

父组件

data: ()=>({

asyncObject:‘‘}),

components: {

child

},

created () {

},

mounted () {//setTimeout模拟异步数据

setTimeout(() =>{this.asyncObject = {‘items‘: [1, 2, 3]}

console.log(‘parent finish‘)

},2000)

}

}

child.vue

子组件

{{childObject.items[0]}}

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

父组件

data: ()=>({

asyncObject:‘‘,

flag:false}),

components: {

child

},

created () {

},

mounted () {//setTimeout模拟异步数据

setTimeout(() =>{this.asyncObject = {‘items‘: [1, 2, 3]}this.flag = trueconsole.log(‘parent finish‘)

},2000)

}

}

//child.vue

子组件//不报错

{{childObject.items[0]}}

props: [‘childObject‘],

data: ()=>({

}),

created () {

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

},

methods: {

}

}

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

子组件

{{test}}

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}}

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}}

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]}}

父组件

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]}}

props: {

childObject: {

type: Object,default() {return{

items:‘‘}

}

}

},

data: ()=>({

}),

created () {

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

}

}