美文网首页
this.$refs 父组件向子组件传值

this.$refs 父组件向子组件传值

作者: 缘之空_bb11 | 来源:发表于2024-04-02 10:24 被阅读0次
    • 1 父组件的方法中通过 this.$refs.命名 的方式,来修改子组件的 data 或调用子组件的方法.
      在 Vue 中,父组件可以通过$refs 来管理通过 ref 注册过的所有子组件,即$refs 对象下可以包含很多 $ref 对象.
      具体使用: 在父组件中引用子组件,在子组件上添加 ref="命名"
    <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的父节点下,导致这个子组件未渲染,也是导致获取不到的因素。

    • 2 this.$refs 如何传到子组件 (使用场景例如弹框内部封装一个组件,但是在组件中需要调用弹框的方法)

      在Vue.js中,$refs是一个特殊的属性,它提供了一种方式来访问组件实例或者DOM元素的引用。如果你想要将this.$refs传递到子组件中,你可以通过props来实现。
      首先,在父组件中定义一个prop来接收传递过来的$refs:

    // 父组件
    export default {
      props: {
        refs: Object
      },
      mounted() {
        // 使用refs
        console.log(this.refs);
      }
    }
    

    然后,在父组件的模板中,将$refs绑定到子组件的prop上:

    <!-- 父组件模板 -->
    <child-component :refs="this.$refs" />
    

    子组件不需要做任何特殊的处理,只需要像常规prop一样接收它。
    请注意,直接传递this.\$refs可能不是最佳实践,因为\$refs通常是用来注册DOM引用的,而不是用来传递数据的。如果你需要传递特定的数据或方法到子组件,请考虑使用事件或者Vuex来实现

    相关文章

      网友评论

          本文标题:this.$refs 父组件向子组件传值

          本文链接:https://www.haomeiwen.com/subject/gplwtjtx.html