在Vue中,父组件向子组件传值是一种非常常见的通信方式, 可以通过ref(模板引用)和props(属性)来实现
1. 通过 ref 调用子组件的方法
父组件:
<template>
<child-component ref="child"/>
</template>
<script >
export default {
name: 'FatherComponent',
mounted(){
// 用定时器模拟异步网络请求,
setTimeout(()=>{
// 假设 res 是请求回来的数据
// 方法 1 通过$refs 调用子组件的方法, 并传入请求结果
this.$refs.child.hangleProp(res);
})
}
}
</script>
子组件:
<template>
<div>{{res}}</div>
</template>
<script >
export default {
name: 'ChildComponent',
data() {
return {
res: ''
};
},
methods: {
/*该方法用于接收值,并处理父组件穿过来的值*/
hangleProp(data) {
// 这是通过方式 1 实现的传值,
console.log('父组件通过 $refs 穿过来的值是 : ',data);
}
},
}
</script>
2. 通过 props 传值的方式,需要用 watch 来监听属性值的变化
父组件:
<template>
<child-component v-bind:pass-data="ajaxResult" />
</template>
<script >
export default {
name: 'FatherComponent',
data() {
return {
ajaxResult: null
};
},
mounted(){
// 用定时器模拟异步网络请求,
setTimeout(()=>{
// 假设 res 是请求回来的数据
// 方法二 : 通过 绑定属性的方式动态传值
this.ajaxResult = res; // 这里父组件的 ajax 改变了;
})
}
}
</script>
子组件:
<template>
<div>{{res}}</div>
</template>
<script >
export default {
name: 'ChildComponent',
props: {
passData: {
type: Object,
default: null
},
},
watch: {
passData(){
console.log('passData 改变了',this.passData);
// 接下来就可以执行其他的操作了;比如说,初始化 echarts 图标
}
}
}
</script>
注意事项:
props是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件意外改变父组件的状态,从而导致应用的数据流向难以理解。如果子组件需要改变prop的值,它应该emit一个事件,父组件侦听到这个事件后,可以更新数据并传给子组件
通过上述步骤,就可以在Vue中实现父组件向子组件传值了