vue中子组件调用兄弟组件方法
开发中遇到子组件需要调用兄弟组件中的方法，如下写个小demo记录下心得，如果你有好的方法，请到评论区域指教父组件示例代码：组件功能解析： 通过$emit获取子组件事件，通过$ref调用子组件中事件，实现子组件二的click事件调用兄弟组件一中的事件?123456789101112131415161718192021222324252627282930313233343536373839&
·
开发中遇到子组件需要调用兄弟组件中的方法，如下写个小demo记录下心得，如果你有好的方法，请到评论区域指教
父组件示例代码：
组件功能解析：
通过$emit获取子组件事件，通过$ref调用子组件中事件，实现子组件二的click事件
调用兄弟组件一中的事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<template>
<div>
<!-- 子组件1 -->
<son1 ref=
"borther"
:dataFromFather=
"dataFromFather"
></son1>
<!-- 子组件2 -->
<son2 @clickBrotherBtn=
"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.bortherMethods()
},
}
}
</script>
<style lang=
"less"
scoped>
/* .... */
</style>
|
子组件一
组件功能解析：
加载父组件数据，进行业务操作
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<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传给父组件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<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>
|
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)