无论是什么层级的组件之间互相调用，掌握好ref后都是万变不离其宗。来练练手吧
1.父子传：
父组件:
<template><div><Button @click="handleClick">点击调用子组件方法</Button><Child ref="child"/></div></template> <script>import Child from './child';export default {methods: {handleClick() {this.$refs.child.childFun();},},}</script>
子组件：
<template><div>我是子组件</div></template><script>export default {methods: {childFun() {console.log('我是子组件的方法');},},};</script>
2.父孙传：
父组件：
<template><div><Button @click="handleClick">点击调用孙组件方法</Button><Child ref="child"/></div></template> <script>import Child from './child';export default {components: {Child },methods: {handleClick() {this.$refs.child.$refs.grandson.test() },},}</script>
子组件：
<template><div>我是子组件</div><grandson ref='grandson'></grandson></template><script>import grandson from './grandson';export default {name: "child",components: {grandson },methods: {childFun() {console.log('我是子组件的方法');},},};</script>
孙组件：
<template><div></div></template><script>export default {name: "grandson",methods:{test(){console.log('我是孙组件的方法')}}}</script>
3.父孙传2(复用性更高)：
父组件：
<template><div><Button @click="handleClick">点击调用子组件方法</Button><Child ref="child"/></div></template> <script>import Child from './child';export default {components: {Child },methods: {handleClick() {this.$refs.child.test();},},}</script>
子组件：
<template><div>我是子组件</div><grandson ref='grandson'></grandson></template><script>import grandson from './grandson';export default {name: "child",components: {grandson },methods: {childFun() {console.log('我是子组件的方法');},test() {this.$refs.grandson.test(); // 一层层调用到孙组件方法},},};</script>
孙组件：
<template><div>我是孙组件</div></template><script>export default {name: "grandson",methods:{test(){console.log('我是孙组件的方法')}}}</script>
4.兄弟传：
父组件：
<template><child1 ref="child1Container"></child1><child2 @order="order"></child2></template><script>import child1 from './components/child1';import child2 from './components/child2';export default {name: 'father',components: {child1,child2},methods: {order(){this.$refs.child1Container.say();}}}</script>
子兄弟组件1：
<template><div>我是子组件11111</div><div @click="say"></div></template><script>export default {name: 'child1',methods: {say(){console.log('我是子组件1里面的方法");}}}</script>
子兄弟组件2：
<template><div>我是子组件22222</div><div @click="orderBro">点击调用兄弟1组件方法</div></template><script>export default {name: 'child2',methods: {orderBro(){this.$emit('order');}}}</script>
5.非亲子孙传：
父组件：
<template><child1 ref="child1Container"></child1><child2 @order="order"></child2></template><script>import child1 from './components/child1';import child2 from './components/child2';export default {name: 'father',components: {child1,child2},methods: {order(){this.$refs.child1Container.say();}}}</script>
子兄弟组件1：
<template><div>我是子组件11111</div><grandson ref='grandson'></grandson></template><script>export default {name: 'child1',methods: {say(){this.$refs.grandson.say();}}}</script>
子兄弟组件2：
<template><div>我是子组件22222</div><div @click="orderBroGrandson">点击调用兄弟1组件的孙组件方法</div></template><script>export default {name: 'child2',methods: {orderBroGrandson(){this.$emit('order');}}}</script>
子兄弟组件1的子组件（孙组件）：
<template><div>我是子兄弟1组件的子组件（孙组件）</div></template><script>export default {name: "grandson",methods:{say(){console.log('调用子兄弟组件1的子组件（孙组件）的方法')}}}</script>
完
ref真滴牛弊
THX~
