vue $refs 父组件向子组件传值
在Vue中,父组件可以通过 $refs来管理通过ref注册过的所有子组件,即 $refs对象下可以包含很多 $ref对象。
·
在Vue中,父组件可以通过 $refs来管理通过ref注册过的所有子组件,即 $refs对象下可以包含很多 $ref对象。
在父组件中引入子组件,在子组件上添加 ref="命名"
在父组件的方法中可以通过 this.$refs.命名 修改子组件的data值或调用子组件的方法。
例如:
<template>
<Child ref="child"></Child>
</template>
<script>
export default {
name: "Parent",
data () {
return {
}
},
mounted() {
this.$nextTick(() => {
this.$refs.child.childflag = true;
}
}
methods: {
this.$nextTick(() => {
// 父组件调用子组件方法
this.$refs.child.childMethod();
// 父组件赋值子组件的数据
this.$refs.child.childflag = false;
}
}
}
</script>
注意:
可能会出现this.$refs 获取不到值的问题,原因有:
1、使用this.$refs如果要在mouend()中使用,必须要在this.$nextTick(()=>{ }) 这里面实现,要不然找不到ref,原因是mouned()之前,BOM节点还没有完全挂载上,于是找不到定义的ref。
2、可以直接在updata()的生命周期函数中使用,不用写this.$nextTick(()=>{ }) 。
3、在methods:{ } 方法中使用,也需要使用this.$nextTick(()=>{ } ) 等到页面完全渲染完毕之后在调用即可。
4、组件在v-if为false的父节点下,导致这个子组件未渲染,也是导致获取不到的因素。
更多推荐
已为社区贡献3条内容
所有评论(0)