1.子元件呼叫父元件函式

• 在父元件裡面進行定於函式

export default {
	provide(){
	    return {
	      reload:this.reload,
	    }
	  },
	  methods: {
		  reload(){
		      this.isRouterAlive = false;
		      this.$nextTick(() => (this.isRouterAlive = true))
		   },
	  }
  }

• 父元件方法應用

<div class="noneTop" v-if="isRouterAlive"><header-bar></header-bar></div>
 

• 首先在子元件裡面進行引用父元件的函式，然後再所需要的函式裡面直接呼叫——這種方法可直接重新整理父元件

inject:['reload'],
methods: {
	  action(){
	  	this.reload();
	}
  }

2.父元件呼叫子元件函式

• 首先在父元件裡面定義函式

<div class="noneTop"><header-initrator ref="childMsg"></header-initrator></div>

• 父元件函式觸發事件注意：childMsg後面的函式一定要是子元件的方法，不然觸發不了事件

methods: {
	 topCancel(){
        this.$refs.childMsg.parentEvent();
    },
}

• 子元件函式

methods: {
    parentEvent() {
    	console.log('觸發！');
    },
   }

3. 子元件傳參，父元件接收

• 子元件方法事件

this.$emit('transferHeader', 123);

• 父元件接收引數

<router-view @transferHeader="getLogin"></router-view>

在methods中編寫方法

 getLogin(event) {
	console.log(event,'引數')
 }

4. 父元件傳參，子元件接收引數

• 父元件傳值方法

<router-view  :topId="topId"></router-view>

export default {
data () {
    return {
      topId:3,
    }
  },
}

• 接收父傳的值，使用到props接收值。

<template>
    <div>{{topId}}</div>
</template>

export default {
	props: ['topId'],
 }