埋坑一: vue中子组件调用兄弟组件方法
小计: 开发中遇到子组件需要调用兄弟组件中的方法,如下写个小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>埋坑一: vue中子组件调用兄弟组件方法的更多相关文章
- Vue中子组件调用父组件的方法
Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法
vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
- vue 子组件调用父组件的方法
vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...
- Vue 子组件调用父组件 $emit
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue 父组件调用子组件的方法
qwq 前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...
- vue 子组件调用父组件的函数
子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...
- vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等
vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
随机推荐
- PHP之面向对象小结
PHP 中创建对象 类创建后,我们可以使用 new 运算符来实例化该类的对象: $runoob = new Site; PHP 构造函数 构造函数 ,是一种特殊的方法.主要用来在创建对象时初始化对象, ...
- [CSP-S模拟测试]:mine(DP)
题目描述 有一个$1$维的扫雷游戏,每个格子用$*$表示有雷,用$0/1/2$表示无雷并且相邻格子中有$0/1/2$个雷.给定一个仅包含$?$.$*$.$0$.$1$.$2$的字符串$s$,问有多少种 ...
- vue仿追书神器,vue小说项目源码
vue-reader 一点阅读器!API源自追书神器,免费使用!目前已初步开发完成! Github项目地址:https://github.com/AntonySufer/vue-readle 欢迎is ...
- 指针的value
全局变量的默认初始化值为0,char为空字符——'\0',string为"\0 " char c; string s; ; int main() { cout << p ...
- 如何在列表,字典,集合中,根据条件筛选数据 -- Python数据结构与算法相关问题与解决技巧
实际案例: 1.过滤掉列表 [3,9,-1,10,20,-2..]的负数 2.筛出字典{'LiLei':79,'Jim':88,'Lucy':92...}中值高于90的项 3.筛出集合 {77,89, ...
- C++中的抽象类和接口
1,在 C++ 语言中,并不直接支持面向对象中的抽象类和接口概念,但是 C++ 语言 却可以间接实现这些概念: 2,什么是抽象类: 1,面向对象中的抽象(其实就是分类)概念: 1,在进行面向对象分析时 ...
- python opencv 生成验证码
基本思路是使用opencv来把随机生成的字符,和随机生成的线段,放到一个随机生成的图像中去. 虽然没有加复杂的形态学处理,但是目前看起来效果还不错 尝试生成1000张图片,但是最后只有998张,因为有 ...
- python学习笔记--类(一)
# 类是为了代码重用 class First: #类 pass #实例 = 类名() obj = First() # 类是一种产生实例的工厂# 类和模块的差异在于,内存中特定的模块只有一个实例(所以我 ...
- kubernetes容器集群管理部署master节点组件
集群部署获取k8s二进制包 [root@master ~]# wget https://dl.k8s.io/v1.15.0/kubernetes-server-linux-amd64.tar.gz [ ...
- c# 编程--数组例题
1.输入十个学生的成绩,找出最高分 #region 输入十个学生的成绩,找出最高分 //输入十个学生的成绩,找出最高分 ]; ; i < ; i++) { ; Console.Write(&qu ...