router-view和父页面互调方法

子页面调父页面: this.$parent.fatherMethod()

父页面调子页面: this.$refs.childName.childMethod()

parent 父页面

  <div>
  	<h1>父级页面</h1>
  	<button @click="callChild">调用子页面方法</button>
  	<button @click="beiChildMethod">被子页面调用方法</button>
    <router-view ref="child"></router-view>
  </div>

methods: {
	callChild() {
		this.$refs.child.childMethod()  // 调用子页面方法
	},
	beiChildMethod() {
		alert('我是parent!')
	}
	
}

child 路由子组件

  <div>
  	<h3>我是子页面</h3>
  	<button @click="childMethod">执行本页面的方法</button>
  	<button @click="callFather">调用父页面的方法</button>
  </div>

methods: {
	childMethod() {
		alert('我是child!')
	},
	callFather() {
		this.$parent.beiChildMethod();  // 调用父组件的beiChildMethod()方法
	
	}
}

this.$parent.fatherMethod();
Vue—router-view组件使用方法

this.$refs[‘child’].childMethod()