VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法
vue——组件传值
父组件传值给子组件——“props”
一、父组件——示例
<template>
<child :choose-data="chooseData"></child>
</template>
<style scoped>
</style>
<script>
/**
* Created by *** on 2021/3/9
*/
import Child from './child_components'
export default {
components: {
Child
},
data() {
return {
chooseData: [0, 1, 2]
};
}
}
</script>
二、子组件——示例
<template>
</template>
<style scoped>
</style>
<script>
/**
* Created by *** on 2021/3/9
*/
export default {
props: {
chooseData: {
type: Array
}
},
data() {
return {};
},
watch: {
// 监听父组件传递过来的chooseData的变化
chooseData: {
// immediate如果为true 代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法
immediate: true,
handler: function () {
if (this.chooseData.length) {
this._loadDta(this.chooseData);
}
}
}
},
methods:{
_loadDta(chooseData){
window.console.log(chooseData)
}
}
}
</script>
子组件传值给父组件——“$emit”
注意:“$emit”在子组件传值给父组件时也同时在调用父组件中的方法,即此方法是一举两得
一、子组件——示例
<template>
</template>
<style scoped>
</style>
<script>
/**
* Created by *** on 2021/3/9
*/
export default {
props: {
chooseData: {
type: Array
}
},
data() {
return {};
},
watch: {
// 监听父组件传递过来的chooseData的变化
chooseData: {
// immediate如果为true 代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法
immediate: true,
handler: function () {
if (this.chooseData.length) {
this._loadDta(this.chooseData);
}
}
}
},
methods: {
_loadDta(chooseData) {
window.console.log(chooseData);
// 'res'为从后端获取到的数据
// 监听到父组件传递过来的chooseData后从后端获取数据,完了之后再将获取到的数据传递给父组件
this.transferHistogramData(res.data.data.histogram);
},
// 将后端传过来的柱状图数据通过'$emit'传递给父组件
// 注意:'getHistogramData'为父组件中引用子组件时绑定的方法名"@getHistogramData='getHistogramData'"
// 'histogramData'表示子组件以参数的方式将数据传递给父组件
transferHistogramData(histogramData) {
this.$emit('getHistogramData', histogramData);
}
}
}
</script>
二、父组件——示例
<template>
<child @getHistogramData="getHistogramData"></child>
</template>
<style scoped>
</style>
<script>
/**
* Created by *** on 2021/3/9
*/
import Child from './child_components'
export default {
components: {
Child
},
data() {
return {
histogramData: ''
};
},
methods: {
// 接收子组件传递过来的data数据
getHistogramData(data) {
this.histogramData = data;
},
}
}
</script>
兄弟组件之间的传值
方法一:
如果兄弟组件全部都引用到父组件中,则可以将父组件作为载体,实现兄弟组件之间相互传值
方法二:
首先新建一个起过渡作用的中间件——handler.js
中间件handler.js(自己理解,无从考证)
/**
* Created by *** on 2021/3/
*/
import Vue from 'vue';
export default new Vue();
组件一brother1——示例
<template>
</template>
<style scoped>
</style>
<script>
/**
* Created by *** on 2021/3/9
*/
import handler from './handler';
export default {
data() {
return {};
},
methods: {
// 页面切换之后对应的tab值
// 每切换一个tab页面,则将tab值借助handler实时传递给兄弟组件brother2
afterShowTab(tabInstance, tabNum) {
if (tabNum === 0) {
handler.$emit('changeActiveItem', tabNum);
}
if (tabNum === 1) {
handler.$emit('changeActiveItem', tabNum);
}
if (tabNum === 2) {
handler.$emit('changeActiveItem', tabNum);
}
},
}
}
</script>
组件二brother2——示例
<template>
<h1>当前页面的tab值:{{activeItem}}</h1>
</template>
<style scoped>
</style>
<script>
/**
* Created by *** on 2021/3/9
*/
import handler from './handler'
export default {
data() {
return {
activeItem: ''
};
},
mounted() {
// 当页面渲染完成后,监听brother1兄弟组件传递过来的tabNum值
// 当前组件要保证与brother1兄弟组件的页面tab值保持一致
handler.$on('changeActiveItem', (tabNum) => {
this.activeItem = tabNum;
});
},
}
</script>
vue组件中的方法互相调用
父组件调用子组件中的方法
一、父组件——示例
<template>
<div>
<child ref="childComponents"></child>
<button @click="fatherMethod()">点击触发子组件的'ChildMethod'方法</button>
</div>
</template>
<style scoped>
</style>
<script>
/**
* Created by *** on 2021/3/9
*/
import Child from './child_components'
export default {
components: {
Child
},
data() {
return {};
},
methods: {
fatherMethod() {
this.$refs.childComponents.ChildMethod()
}
}
}
</script>
二、子组件——示例
<template>
</template>
<style scoped>
</style>
<script>
/**
* Created by *** on 2021/3/9
*/
export default {
data() {
return {};
},
methods: {
ChildMethod() {
window.console.log('父组件调用子组件方法测试');
}
}
}
</script>
子组件调用父组件中的方法
方法一:
使用 “$emit” 在子组件调用父组件的方法时同时将所需数据传递给父组件
方法二:
使用 “$parent” 也可以实现子组件调用父组件的方法
一、子组件——示例
<template>
<div>
<button @click="childMethod()">点击触发父组件的'fatherMethod'方法</button>
</div>
</template>
<style scoped>
</style>
<script>
/**
* Created by *** on 2021/3/9
*/
export default {
data() {
return {};
},
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
}
</script>
二、父组件——示例
<template>
<child></child>
</template>
<style scoped>
</style>
<script>
/**
* Created by *** on 2021/3/9
*/
import Child from './child_components'
export default {
components: {
Child
},
data() {
return {};
},
methods: {
fatherMethod() {
window.console.log('子组件调用父组件方法测试');
}
}
}
</script>
VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法的更多相关文章
- Vue-组件传值:子传父和兄弟组件间常见的传值方式
前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...
- vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- Vue 中的受控与非受控组件
Vue 中的受控与非受控组件 熟悉 React 的开发者应该对"受控组件"的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外.并且 ...
- Vue父子组件相互传值及调用方法的方案
Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...
- vue中修改子组件样式
一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...
- Vue父子,子父,非父子组件之间传值
Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...
- vue通信之子父组件通信
子父组件通信: 创建一个父组件 Home , 创建一个子组件 Head Home 组件: import Head from "./Head.vue" // 引入 Head 组件 c ...
- vue中如何编写可复用的组件?
原文地址 Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日 ...
- vue中的v-model原理,与组件自定义v-model
VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧 根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" ...
随机推荐
- vue中获取元素并控制相应的dom
1 在标签中使用ref="xxx" 2 在methods中调用this.$refs.xxx this.$refs.xxx.$el获取dom 注意1:大多数情况下为了复用方法,将xx ...
- springboot demo(二)web开发demo
如入门般建立项目,引入依赖: <dependencies> <dependency> <groupId>org.springframework.boot</g ...
- gradle中的build script详解
目录 简介 project和task 一个例子 task详细讲解 task脚本 task依赖 动态task 默认task build script的外部依赖 gradle中的build script详 ...
- C#通过NI-VISA操作Tektronix TBS 2000B系列示波器
一.概述 本文描述采用C#语言访问控制Tektronix TBS 2000B 系列示波器.接口协议采用NI-VISA. 最近一个项目需要和一款示波器进行通信,需要对示波器进行一些简单控制并获取到波形数 ...
- markdown table collapse span
markdown table collapse span refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问! 原创文章,版权所有️x ...
- CSS 水平滚动条 bug & width auto increase bug
CSS 水平滚动条 bug css overflow & width auto increase bug 问题排查方式 删除可疑的模块,一步步找到问题的原因,定位问题所在 寻找可能会导致 wi ...
- 如何在没有显示器的情况下,查看 Raspberry Pi 3的 IP 信息(Raspberry Pi 3 ,IP Address)
1. 如何在没有显示器的情况下,查看 Raspberry Pi 3的 IP 信息(Raspberry Pi 3 ,IP Address) 1 IP Address Any device connect ...
- Apple Support
Apple Support Send Files to Apple Support https://gigafiles.apple.com/#/customerupload refs 无法截屏 bug ...
- Prometheus Monitoring Solution
Prometheus Monitoring Solution 普罗米修斯 https://prometheus.io/ 警报 监控 增强指标和警报 领先 开源监控解决方案 https://promet ...
- Web 网站安全测试 & 渗透测试
Web 网站安全测试 & 渗透测试 Penetration Testing learning path 建一个测试环境来进行渗透测试 安装 Kali Linux -渗透测试操作系统 在虚拟机中 ...