正文
vue之父子组件执行对方的方法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、子组件执行父组件中的方法
1、父组件将方法名传给子组件，子组件进行调用
父组件中：
<Vbutton typeBtn="success" :btnUserMethod="addOneUser" >添加用户</Vbutton>
methods: {
addOneUser() {
$('#addModal').modal('show')
}
}
子组件中：
<template>
<button class="btn" :class="currentBtn" @click="handleClickParent">
<slot>按钮</slot>
</button>
</template>
props:{
typeBtn:String,
btnUserMethod:Function //验证类型接收父组件方法名
},
methods:{
handleClickParent(){
this.btnUserMethod(); //子组件调用父组件方法
}
},
2、子组件里用
$emit
向父组件触发一个事件，父组件监听这个事件
父组件中：
<Vbutton typeBtn="success" :btnUserMethod="addOneUser" >添加用户</Vbutton>
methods: {
addOneUser() {
$('#addModal').modal('show')
}
}
子组件中：
<template>
<button class="btn" :class="currentBtn" @click="handleClickParent">
<slot>按钮</slot>
</button>
</template>
methods:{
handleClickParent(){
this.$emit('addOneUser'); //这里还可以向父组件传参，只需要父组件函数有对应的形参即可
}
},
}
二、父组件执行子组件中的方法
子组件：
//子组件Vbutton
childMethod(){
alert("我是子组件方法")
}
父组件：
<template>
<div>
<button @click="parentClick">点击</button>
<Vbutton ref="child" /> <!--使用组件标签-->
</div>
</template>
parentClick() {
this.$refs.child.childMethod("我是子组件里面的方法"); // 调用子组件的方法childMethod
},
（1）在子组件中写入相应的方法
（2）在父组件中引入子组件
（3） <Vbutton ref="mychild" /> 是在父组件中为子组件添加一个占位，ref="child"是子组件在父组件中的名字
（4）在父组件的方法中调用子组件的方法，很重要 this.$refs.child.childMethod("我是子组件里面的方法");
