vue 父组件调用子组件方法ref

Posted 2023-04-04 coinisi_li

一、ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上

vue中如果父组件想调用子组件的方法，可以在子组件中加上ref，然后通过this.$refs.ref.method调用。

父组件：

<template>
  <div @click="fatherMethod">
    <orderchild ref="child"></orderchild>
  </div>
</template>
<script>
  import orderchild from '~/components/orderchild.vue';
  export default 
    components: 
      orderchild
    ,
    methods: 
      fatherMethod() this.$refs.child.childMethods();
      
    
  ;
</script>

 子组件：

<template>
  <div>name</div>
</template>
<script>
  export default 
    data() 
      return 
        name: '测试'
      ;
    ,
    methods: 
      childMethods() 
        console.log(this.name);
      
    
  ;
</script>

在父组件中， this.$refs.child 返回的是一个vue实例，可以直接调用这个实例的方法

二、在vue2.0和vue3.0中，ref方法有一些变化：

vue2.0 父组件

<Table ref="eleTable" @handle="handleFun"></Table>

methods： 

this.$refs.eleTable.子组件的方法名+()

this.$refs.eleTable.子组件的属性名

vue3.0 父组件

  <Table ref="eleTable" @handle="handleFun"></Table>

import  ref   from 'vue'

setup()  
   //ref方法
    const eleTable = ref()  //eleTable是页面ref后面对应的名字
    const clickSon = () =>
      eleTable.value.changeShowText() //调用子组件的方法
      let arr = eleTable.value.tableData //获取子组件 setup 里面定义的变量
   

 

参考：vue3.0中使用ref来调用子组件的方法_普通网友的博客-CSDN博客_ref调用子组件方法 

vue中父组件调用子组件函数

用法： 子组件上定义ref="refName",  父组件的方法中用 this.$refs.refName.method 去调用子组件方法

详解： 父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件；那么就需要先找到子组件对象 ，即  this.$refs.refName.

然后再进行调用，也就是 this.$refs.refName.method

如下：

子组件：

<template>
  <div>
    childComponent
  </div>
</template>
 
<script>
  export default {
    name: "child",
    methods: {
      childClick(e) {
        console.log(e)
      }
    }
  }
</script>

父组件：

<template>
  <div>
    <button @click="parentClick">点击</button>
    <Child ref="mychild" />   //使用组件标签
  </div>
</template>
 
<script>
  import Child from ‘./child‘;   //引入子组件Child
  export default {
    name: "parent",
    components: {
      Child    // 将组件隐射为标签
    },
    methods: {
      parentClick() {
        this.$refs.mychild.childClick("我是子组件里面的方法哦");  // 调用子组件的方法childClick
      }
    }
  }
</script>