1.父组件调用子组件的方法
子组件见面绑紧refname 父组件通过$refs.refname获取
<template>
<div>
<h1>子组件</h1>
</div>
</template>
<script>
export default {
methods:{
childClick(e){
return e
}
}
}
</script>
template>
<div>
<h1>组件间的事件测试</h1>
<Child ref="myChild" />
<button @click="getChildMethods">获取子组件方法</button>
</div>
</template>
<script>
import Child from './child'
export default {
components:{
Child
},
methods:{
getChildMethods(){
console.log(this.$refs.myChild.childClick('调用子组件事件'))
}
}
}
</script>
2.子组件调用父组件的方法
2.1 通过$parent来获取
<template>
<div>
<h1>子组件</h1>
<button @click="getParent1">获取父组件的方法</button>
<button @click="getParent2">获取父组件的方法</button>
<button @click="getParent3">获取父组件的方法</button>
</div>
</template>
<script>
export default {
methods:{
getParent1(){
this.$parent.parentsMthods()
},
getParent2(){
},
getParent3(){
}
}
}
</script>
<template>
<div>
<h1>组件间的事件测试</h1>
<Child/>
</div>
</template>
<script>
import Child from './child'
export default {
components:{
Child
},
methods:{
parentsMthods(){
console.log('父组件方法1')
}
}
}
</script>
2.2 通过$emit推送事件 子组件标签通过自定义事情名接收
<template>
<div>
<h1>子组件</h1>
<button @click="getParent1">获取父组件的方法</button>
<button @click="getParent2">获取父组件的方法</button>
<button @click="getParent3">获取父组件的方法</button>
</div>
</template>
<script>
export default {
methods:{
getParent1(){
this.$parent.parentsMthods()
},
getParent2(){
this.$emit('parentsMthods')
},
getParent3(){
}
}
}
</script>
<template>
<div>
<h1>组件间的事件测试</h1>
<Child @parentsMthods='parentsMthods' />
</div>
</template>
<script>
import Child from './child'
export default {
components:{
Child
},
methods:{
parentsMthods(){
console.log('父组件方法2')
}
}
}
</script>
2.3 子组件标签自定义 子组件标签内部直接通过props接收
<template>
<div>
<h1>子组件</h1>
<button @click="getParent1">获取父组件的方法</button>
<button @click="getParent2">获取父组件的方法</button>
<button @click="getParent3(111)">获取父组件的方法</button>
</div>
</template>
<script>
export default {
props:['getParent3'],
methods:{
getParent1(){
this.$parent.parentsMthods()
},
getParent2(){
this.$emit('parentsMthods')
},
}
}
</script>
<template>
<div>
<h1>组件间的事件测试</h1>
<Child :getParent3='parentsMthods' />
</div>
</template>
<script>
import Child from './child'
export default {
components:{
Child
},
methods:{
parentsMthods(a){
console.log(a)
}
}
}
</script>