Vue 父组件调用子组件函数的方法

时间:2023-03-09 17:52:26
Vue 父组件调用子组件函数的方法

parent.vue(父组件的内容):

<template>
<div @click="divClick">
<info-wnd ref="infoWnd"></info-wnd>
  </div> </template>
<script>
import infoWnd from './info-wnd';
export default {
data() {
return {
}
},
components: { infoWnd },
methods: {
divClick() {
this.$refs.infoWnd.infoWndClick(); //调用子组件的方法
}
}
}
</script>

子组件info-wnd.vue内容:

<template>
<div>
<span>这是子组件</span>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
infoWndClick() {
console.log('这是子组件的方法');
}
}
}
</script>