vue中用ref实现父子组件、孙组件、兄弟组件、非亲子孙组件互相调用的方法

无论是什么层级的组件之间互相调用，掌握好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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

子组件：

<template>
  <div>我是子组件div>
template>
<script>
export default {
  methods: {
    childFun() {
      console.log('我是子组件的方法');
    },
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12

---

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

子组件：

<template>
  <div>我是子组件div>
  <grandson ref='grandson'>grandson>
template>
<script>
import grandson from './grandson';
export default {
    name: "child",
	components: {
    	grandson 
  	},
    methods: {
      childFun() {
        console.log('我是子组件的方法');
      },
    },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

孙组件：

<template>
  <div>div>
template>

<script>
export default {
  name: "grandson",
  methods:{
    test(){
      console.log('我是孙组件的方法')
    }
  }

}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

子组件：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

孙组件：

<template>
  <div>我是孙组件div>
template>

<script>
export default {
  name: "grandson",
  methods:{
    test(){
      console.log('我是孙组件的方法')
    }
  }

}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

子兄弟组件1：

<template>
    <div>我是子组件11111div>
    <div @click="say">div>
template>
 
<script>
    export default {
        name: 'child1',
        methods: {
            say(){
                console.log('我是子组件1里面的方法");
            }
        }
    }
 
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

子兄弟组件2：

<template>
    <div>我是子组件22222div>
    <div @click="orderBro">点击调用兄弟1组件方法div>
template>
 
<script>
    export default {
        name: 'child2',
        methods: {
            orderBro(){
                this.$emit('order');
            }
        }
    }
 
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

子兄弟组件1：

<template>
    <div>我是子组件11111div>
    <grandson ref='grandson'>grandson>
template>
 
<script>
    export default {
        name: 'child1',
        methods: {
            say(){
                this.$refs.grandson.say();
            }
        }
    }
 
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

子兄弟组件2：

<template>
    <div>我是子组件22222div>
    <div @click="orderBroGrandson">点击调用兄弟1组件的孙组件方法div>
template>
 
<script>
    export default {
        name: 'child2',
        methods: {
            orderBroGrandson(){
                this.$emit('order');
            }
        }
    }
 
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

子兄弟组件1的子组件（孙组件）：

<template>
  <div>我是子兄弟1组件的子组件（孙组件）div>
template>

<script>
export default {
  name: "grandson",
  methods:{
    say(){
      console.log('调用子兄弟组件1的子组件（孙组件）的方法')
    }
  }

}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

完
ref真滴牛弊
THX~