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

方法一：

//父组件
<template>
  <div class="home">
    <HelloWorld ref="mychild"></HelloWorld>
    <div @click="clickParent">click me</div>
  </div>
</template>
<script>
  import HelloWorld from '@/components/HelloWorld.vue'
  export default {
    name: 'home',
    components: {
      HelloWorld
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>

//子组件
<template>
  <div class="hello">
    <h1>我是HelloWorld组件</h1>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    created() {

    },
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
</script>

子组件调用父组件的方法（3种）

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

• 父组件：

• <template>
    <div>
      <child></child>
    </div>
  </template>
  <script>
    import child from '~/components/dam/child';
    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. 在子组件里用$emit向父组件触发一个事件，父组件监听这个事件

• 父组件：

• <template>
    <div>
      <child @fMethod="fatherMethod"></child>
    </div>
  </template>
  <script>
    import child from '~/components/dam/child';
    export default {
      components: {
        child
      },
      methods: {
        fatherMethod(data) {
          console.log(data);
        }
      }
    };
  </script>

• 子组件：

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

  3. 父组件把方法传入子组件中，在子组件里直接调用

• 父组件：

• <template>
    <div>
      <child :fatherMethod="fatherMethod"></child>
    </div>
  </template>
  <script>
    import child from '~/components/dam/child';
    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() {
          if (this.fatherMethod) {
            this.fatherMethod();
          }
        }
      }
    };
  </script>