Vue子组件调用父组件的方法(组件通讯)

欢迎加我技术交流QQ群 ：811956471

前言：子组件调用父组件方法是经常会用到的功能，时间久了不接触vue就好容易忘记，今天特意做个小笔记吧。

方法一：this.$parent.要调用的方法名称

准备工作：首先建两个组件：home组件和HelloWorld组件，在home组件中引用HelloWorld组件

示例：

//父组件：
<template>
  <div class="home">
    <HelloWorld></HelloWorld>
  </div>
</template>
<script>
  import HelloWorld from '@/components/HelloWorld.vue'
  export default {
    name: 'home',
    components: {
      HelloWorld
    },
    methods: {
      HelloWorldParent() {
        console.log("HelloWorld成功调用了其父组件方法")
      }
    }
  }
</script>

//子组件：
<template>
  <div class="hello">
    <h1>我是HelloWorld组件</h1>
    <button @click="userParentFn()">调用父组件方法一</button>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    methods: {
      userParentFn() {
        this.$parent.HelloWorldParent(); //HelloWorld成功调用了其父组件方法
      },
    }
  }
</script>

总结：感觉这个方法最简单了~~~没有什么好主意的地方。可以直接再子组件 created生命周期里调用这个方法，还可以传递参数：

 created() { this.$parent.HelloWorldParent(); //HelloWorld成功调用了其父组件方法 },

=======================================================================================

方法二：用$listeners，支持多层级嵌套组件，如果是传参用

$attrs

父组件中：
<template>
  <div class="home">
    <HelloWorld @fatherMethod="HelloWorldParent"></HelloWorld>
  </div>
</template>
<script>
  import HelloWorld from '@/components/HelloWorld.vue'
  export default {
    name: 'home',
    components: {
      HelloWorld
    },
    methods: {
      HelloWorldParent(val) {
        console.log("HelloWorld成功调用父组件方法",val)
      }
    }
  }
</script>

子组件中：
<template>
  <div class="hello">
    <h1>我是HelloWorld组件</h1>
    <button @click="userParentFn()">调用父组件方法一</button>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    methods: {
      userParentFn() {
       this.$listeners.HelloWorldParent("我是子组件")
      },
    }
  }
</script>

总结：改方法需要再子组件中调用的事件必须先在父组件调用子组件的时候在这个组件上进行绑定才可以