无论是什么层级的组件之间互相调用，掌握好ref后都是万变不离其宗。来练练手吧
1.父子传： 父组件:
子组件：
我是子组件
>
export default {
methods: {
childFun() {
console.log('我是子组件的方法');
},
},
};
2.父孙传： 父组件：
子组件：
我是子组件
孙组件：
>
export default {
name: "grandson",
methods:{
test(){
console.log('我是孙组件的方法')
}
}}
3.父孙传2(复用性更高)： 父组件：
子组件：
我是子组件
孙组件：
我是孙组件
>
export default {
name: "grandson",
methods:{
test(){
console.log('我是孙组件的方法')
}
}}
4.兄弟传： 父组件：
子兄弟组件1：
我是子组件11111
>
export default {
name: 'child1',
methods: {
say(){
console.log('我是子组件1里面的方法");
}
}
}
子兄弟组件2：
我是子组件22222
点击调用兄弟1组件方法
>
export default {
name: 'child2',
methods: {
orderBro(){
this.$emit('order');
}
}
}
5.非亲子孙传： 【vue|vue中用ref实现父子组件、孙组件、兄弟组件、非亲子孙组件互相调用的方法】父组件：
子兄弟组件1：
我是子组件11111
子兄弟组件2：
我是子组件22222
点击调用兄弟1组件的孙组件方法
>
export default {
name: 'child2',
methods: {
orderBroGrandson(){
this.$emit('order');
}
}
}
子兄弟组件1的子组件（孙组件）：
我是子兄弟1组件的子组件（孙组件）
>
export default {
name: "grandson",
methods:{
say(){
console.log('调用子兄弟组件1的子组件（孙组件）的方法')
}
}}
完
ref真滴牛弊
THX~
推荐阅读
- 职业发展|猿创征文｜活在大二，前端的我勇往直前
- TypeScript|nodejs在使用async/await时报错__awaiter is not defined
- 实战|nodejs fs模块结合async await处理fs异步使用
- node|nodejs学习之旅--异步终极解决方案async和await--Ajax--浏览器访问网站的基本过程以及http详解
- Node.js|Nodejs 新特性 async await 的使用 以及使用 async await 处理异步
- JavaScript版数据结构与算法 轻松解决前端算法面试
- C#|多次握手登录
- 前端|HTML基础
- 前端|浅谈函数式编程柯里化的魔法