vue父组件点击事件向子界面传递参数再调用子组件事件

最新推荐文章于 2024-09-29 14:58:50 发布

盖世小可爱

最新推荐文章于 2024-09-29 14:58:50 发布

阅读量3.7k

点赞数 3

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qqqnzhky/article/details/112169240

版权

vue 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

父子之间事件事件的派发与接收，使用的是ref给子组件注册引用信息

ref解释：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例

父组件：

<template>
  <div>
    <el-button type="text" @click="sonFun">查询</el-button>
    <dataServiceCallRanking   ref='serviceCallRanking' ></dataServiceCallRanking>
  </div>
</template>
<script>
import dataServiceCallRanking  from './dataServiceCallRanking.vue';
export default {
  components: {
    dataServiceCallRanking
  },
  data() {
    return {
      sonData: ''
    };
  },
  medthods: {
//调用子组件的方法，传递参数
    sonFun() {  
      this.$refs.serviceCallRanking.sonFun(this.sonData);
    }
  }
};
</script>

先引用子组件->在相关位置调用子组件子组件使用ref注册信息

父组件关键代码： this.$refs.serviceCallRanking.sonFun(this.sonData); this.$refs代表父组件的$refs对象 serviceCallRanking是给子组件注册引用信息 sonFun调用子组件方法 this.sonData传递参数

子组件：

<template>
  <div>子组件</div>
</template>
<script>
export default {
  props:[],
  data(){
    return{
    }
  },
  methods:{
    sonFun(param){
      console.log(param)
    }
  }
}
</script>

子组件定义好父组件需要调用的方法sonFun（）就可以调用到此方法了

这个实例分为几个步骤解读：

1、父组件的button元素绑定click事件,该事件指向sonFun方法

2、给子组件注册一个ref="serviceCallRanking",自定义命名

3、父组件的sonFun的方法在处理时，使用了$refs.serviceCallRanking把事件传递给子组件的sonFun方法，同时携带着父组件中的参数param

4、子组件接收到父组件的事件后，调用了sonFun方法，接收到了param