当前位置：首页 > news >正文

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

news 来源：原创 2024/5/17 12:09:12

无论是什么层级的组件之间互相调用，掌握好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>