1、父组件调用子组件的方法
父组件：
<template>
<div>
<button v-on:click="clickParent">点击</button>
<child1 ref="child1"></child1>
</div>
</template> <script>
import Child1 from './child1';
export default {
name: "parent",
components: {
child1: Child1
},
methods: {
clickParent() {
// this.$refs.child1.$emit('click-child', "high");
this.$refs.child1.handleParentClick("ssss");
}
}
}
</script>
子组件：
<script>
export default {
name: "child1",
props: "msg",
methods: {
handleParentClick(e) {
}
}
}
</script>
2、子组件调用父组件的方法
父组件：
<template>
<div class="wrapper">
<cp_action @parentMethod="macSelect"></cp_action>
</div>
</template>
<script>
import ../components/action //引入子组件
export default{
components:{
cp_action
},
method:{
macSelect(){
//方法体
alert(123)；
}
}
}
</script>
子组件：
<template>
<div class="bet-action">
<span class="mac-select" @click="childMethod">机选</span>
</div>
</template>
<script>
export default{
methods: {
childMethod() {
console.log('请求父组件方法');
this.$emit('parentMethod'); //使用$emit()引入父组件中的方法
}
},
}
</script>
3、父组件向子组件传递数据（可以通过props属性来实现）
父组件：