vue中父组件调用子组件的方法并传递参数

筱秂尒

已于 2024-04-12 17:28:25 修改

阅读量223

点赞数 2

文章标签： vue.js 前端 javascript

于 2024-04-03 21:16:22 首次发布

本文链接：https://blog.csdn.net/weixin_45217750/article/details/137357776

版权

在 Vue 中，父组件可以通过 $refs 来调用子组件的方法并传递参数。

首先，你需要在子组件中定义该方法，然后在父组件的模板中给子组件添加一个 ref 属性，这样你就可以在父组件的实例中通过 this.$refs 访问子组件了。以下是一个简单的示例

子组件（ChildComponent.vue）

<template>  
  <div>  
    <!-- 子组件的内容 -->  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    childMethod(param) {  
      console.log('收到父组件传递的参数:', param);  
      // 在这里处理你的逻辑  
    }  
  }  
}  
</script>

父组件（ParentComponent.vue）

<template>  
  <div>  
    <!-- 使用 ref 属性给子组件命名 -->  
    <ChildComponent ref="child" />  
    <button @click="callChildMethod">调用子组件方法</button>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  // 引入子组件
  
export default {  
  // 注册子组件
  components: {  
    ChildComponent  
  },  
  methods: {  
    callChildMethod() {  
      // 使用 $refs 调用子组件的方法并传递参数
      let params = {
      	name: "张三",
      	age: 18
	  };  
      this.$refs.child.childMethod(params);  
    }  
  }  
}  
</script>