vue父子組件相互調用

vue父組件調用子組件

方法一：利用ref 

//父組件
<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>

子組件調用父組件

第一種方法是直接在子組件中通過this.$parent.event來調用父組件的方法

第二種方法是在子組件裏用$emit向父組件觸發一個事件，父組件監聽這個事件就行了。

第三種是父組件把方法傳入子組件中，在子組件裏直接調用這個方法