Vue中子组件调用父组件的3种方法实例

Vue中子组件调用父组件的三种方法：

1.直接在子组件中通过“this.$parent.event”来调用父组件的方法。

父组件

<template>
 <div>
   <child></child>
 </div>
</template>
<script>
 import child from './components/childcomponent';
 export default {
   components: {
     child
   },
   methods: {
     fatherMethod() {
       console.log('父组件方法');
     }
   }
 };
</script>

子组件

<template>
 <div>
   <button @click="childMethod()">点击按钮</button>
 </div>
</template>
<script>
 export default {
   methods: {
     childMethod() {
       this.$parent.fatherMethod();
     }
   }
 };
</script>

2.子组件用&ldquo;$emit&rdquo;向父组件触发一个事件,父组件监听这个事件即可。

父组件

<template>
 <div>
   <child @fatherMethod="fatherMethod"></child>
 </div>
</template>
<script>
 import child from './components/childcomponent'
 export default {
   components: {
     child
   },
   methods: {
     fatherMethod() {
       console.log('父组件方法');
     }
   }
 };
</script>

子组件

<template>
 <div>
   <button @click="childMethod()">点击按钮</button>
 </div>
</template>
<script>
 export default {
   methods: {
     childMethod() {
       this.$emit('fatherMethod');
     }
   }
 };
</script>

3.父组件把方法传入子组件中,在子组件里直接调用这个方法即可。

父组件

<template>
 <div>
   <child :fatherMethod="fatherMethod"></child>
 </div>
</template>
<script>
 import child from './components/childcomponent';
 export default {
   components: {
     child
   },
   methods: {
     fatherMethod() {
       console.log('父组件方法');
     }
   }
 };
</script>

子组件

<template>
 <div>
   <button @click="childMethod()">点击按钮</button>
 </div>
</template>
<script>
 export default {
   props: {
     fatherMethod: {
       type: Function,
       default: null
     }
   },
   methods: {
     childMethod() {
         this.fatherMethod();
       }
     }
   }
 };
</script>

来源：https://blog.csdn.net/qq_44858608/article/details/124156157