组件通信基础版
以下只是基本的父子组件通信,当我要异步传值时比如需要将父组件axios发送的数据传给子组件。显然这种基本的方式是不可行的,获取的数据将一直是[1,2,3],即使你在父组件中通过axios修改了值那么子组件接收到的值也是[1,2,3]。
//父组件
<template>
<div>
<TimeLine :determine="determine"@updateAriplane="timeLineUpdate" />
</div>
</template>
<script>
import TimeLine from '@/components/TimeLine'
export default {
components: {
TimeLine,
},
data() {
return {
determine:[1,2,3]
}
},
}
</script>
//子组件
<script>
export default {
props: {
determine: {
type: Array,
require: true
}
},
methods: {
test () {
console.log(this.determine)//此时打印的就是[1,2,3]
}
},
}
</script>
这种情况我搜到的网上基本好多都是通过v-if或者v-show来判断一个值,根据值来再次重新渲染dom。
我解决的方法是在子组件添加wacth监听属性,通过子组件监听props属性值来判断当前值是否有变化如果有变化就改变值重新赋值。
以下是我的代码
组件通信watch监听版
//父组件
<template>
<div>
<TimeLine :determine="determine"
@updateAriplane="timeLineUpdate" />
</div>
</template>
<script>
import TimeLine from '@/components/TimeLine'
export default {
components: {
TimeLine,
},
data () {
return {
determine: []
}
},
methods: {
test() {
setTimeout(() =>{
this.determine=[2,3,4]
},1000)
}
},
}
//子组件
<script>
export default {
data() {
return {
dataListArray:[]
}
},
props: {
determine: {
type: Array,
require: true
}
},
watch: {
determine(newValue, oldValue) {
//props改变新的值 将更改后的值重新赋值
this.dataListArray=newValue
}
},
methods: {
test () {
console.log(this.dataListArray)// 打印的值即为【2,3,4】
}
},
}
</script>
以上就是我对父子组件异步传值的watch解决方案