Vue项目中如何在父组件中直接调用子组件的方法

呆毛没了

已于 2024-06-19 15:58:03 修改

阅读量461

点赞数 15

文章标签： vue.js javascript 前端

于 2024-06-19 15:43:21 首次发布

本文链接：https://blog.csdn.net/weixin_48635632/article/details/139804661

版权

方案一：通过ref直接调用子组件的方法

//父组件中
 
<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    
 
<script>
import Child from './child';
 
export default {
    methods: {
        handleClick() {
              this.$refs.child.sing();
        },
    },
}
</script>
 
 
//子组件中
 
<template>
  <div>我是子组件</div>
</template>
<script>
export default {
  methods: {
    sing() {
      console.log('我是子组件的方法');
    },
  },
};
</script>

这种方法在遇到多层嵌套组件就显得有些臃肿，不美观且不清晰明了。

方案二：通过组件的 $e mi t 、$ on方法

$e mi t 和$ on 的解释如下链接
https://blog.csdn.net/weixin_48635632/article/details/139805567

//父组件
 // 删除组件树节点
    removeNode(data) {
      removeCustomGroup({ groupId: data.id }).then((res) => {
        this.$message({
          message: "删除成功！",
          type: "success",
        });
        //跟新节点
        //需要调用子组件方法的地方如下定义， ‘childmethod’需要和子组件一致
        this.$refs.SelectorDialog.$emit("childmethod");//通过 $emit 自定义事件
      });
    },

//子组件
  mounted() {
    //$on监听事件
    this.$nextTick(function () {
    //‘childmethod’需要和父组件一致
      this.$on("childmethod", function () {
       //需要调用的方法
      });
    });
  },