vue中子组件调用兄弟组件方法

来源：懂视网责编：小采时间：2020-11-27 22:11:55

vue中子组件调用兄弟组件方法

vue中子组件调用兄弟组件方法:小计：开发中遇到子组件需要调用兄弟组件中的方法，如下写个小demo记录下心得，如果你有好的方法，请到评论区域指教父组件示例代码：组件功能解析：通过$emit获取子组件事件，通过$ref调用子组件中事件，实现子组件二的click事件调用兄弟组件一中的

推荐度：

点击下载本文 文档为doc格式

导读vue中子组件调用兄弟组件方法:小计：开发中遇到子组件需要调用兄弟组件中的方法，如下写个小demo记录下心得，如果你有好的方法，请到评论区域指教父组件示例代码：组件功能解析：通过$emit获取子组件事件，通过$ref调用子组件中事件，实现子组件二的click事件调用兄弟组件一中的

小计：开发中遇到子组件需要调用兄弟组件中的方法，如下写个小demo记录下心得，如果你有好的方法，请到评论区域指教

父组件示例代码：

组件功能解析：

通过$emit获取子组件事件，通过$ref调用子组件中事件，实现子组件二的click事件

调用兄弟组件一中的事件

<template>
 <div>
 <!-- 子组件1 -->
 <son1 ref="borther" :dataFromFather="dataFromFather"></son1>
 <!-- 子组件2 -->
 <son2 @triggerBrotherMethods="triggerBrotherMethods" :dataFromFather="dataFromFather"></son2>
 </div>
</template>

<script>
// 引入子组件一
import son1 from './son1'
// 引入子组件二
import son2 from './son2'

export default {
 data() {
 return {
 dataFromFather: []
 }
 },
 // 注册子组件
 components: {
 son1,
 son2
 },
 methods: {
 // 子组件2中click事件
 triggerBrotherMethods() {
 // 父组件通过$ref调用子组件1中的事件方法
 this.$refs.borther[0].bortherMethods()
 },
 }
}
</script>

<style lang="less" scoped>
/* .... */
</style>

子组件一

组件功能解析：

加载父组件数据，进行业务操作

<template>
 <!-- 子组件son2 -->
 <div @click="bortherMethods">
 <!-- 父组件传值展示 -->
 {{dataFromFather}}
 </div>
</template>

<script>
export default {
 data() {
 return {
 }
 },
 props: ['dataFromFather'],
 methods: {
 // 兄弟组件中的按钮事件
 bortherMethods() {
 // 子组件事件方法
 ...
 },
 }
}
</script>

<style lang="less" scoped>
/* .... */
</style>

子组件二：

组件功能解析：

加载父组件数据，通过click事件emit传给父组件

<template>
 <!-- 子组件son2 -->
 <div @click="triggerBrotherMethods">
 <!-- 父组件传值展示 -->
 {{dataFromFather}}
 </div>
</template>

<script>
export default {
 data() {
 return {
 }
 },
 props: ['dataFromFather'],
 methods: {
 // 触发兄弟组件中的按钮事件
 triggerBrotherMethods() {
 this.$emit('clickBrotherBtn', true)
 },
 }
}
</script>

<style lang="less" scoped>
/* .... */
</style>

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue中子组件调用兄弟组件方法

推荐度：

点击下载本文 文档为doc格式

标签：方法 VUE 调用

热门焦点

vue中子组件调用兄弟组件方法

vue中子组件调用兄弟组件方法

vue中子组件调用兄弟组件方法

最新推荐

猜你喜欢

热门推荐