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中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法的更多相关文章

  1. Vue-组件传值:子传父和兄弟组件间常见的传值方式

    前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...

  2. vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

  3. Vue 中的受控与非受控组件

    Vue 中的受控与非受控组件 熟悉 React 的开发者应该对"受控组件"的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外.并且 ...

  4. Vue父子组件相互传值及调用方法的方案

    Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...

  5. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

  6. Vue父子,子父,非父子组件之间传值

    Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...

  7. vue通信之子父组件通信

    子父组件通信: 创建一个父组件 Home , 创建一个子组件 Head Home 组件: import Head from "./Head.vue" // 引入 Head 组件 c ...

  8. vue中如何编写可复用的组件?

    原文地址 Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日 ...

  9. vue中的v-model原理,与组件自定义v-model

    VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧 根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" ...

随机推荐

  1. vue中获取元素并控制相应的dom

    1 在标签中使用ref="xxx" 2 在methods中调用this.$refs.xxx this.$refs.xxx.$el获取dom 注意1:大多数情况下为了复用方法,将xx ...

  2. springboot demo(二)web开发demo

    如入门般建立项目,引入依赖: <dependencies> <dependency> <groupId>org.springframework.boot</g ...

  3. gradle中的build script详解

    目录 简介 project和task 一个例子 task详细讲解 task脚本 task依赖 动态task 默认task build script的外部依赖 gradle中的build script详 ...

  4. C#通过NI-VISA操作Tektronix TBS 2000B系列示波器

    一.概述 本文描述采用C#语言访问控制Tektronix TBS 2000B 系列示波器.接口协议采用NI-VISA. 最近一个项目需要和一款示波器进行通信,需要对示波器进行一些简单控制并获取到波形数 ...

  5. markdown table collapse span

    markdown table collapse span refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问! 原创文章,版权所有️x ...

  6. CSS 水平滚动条 bug & width auto increase bug

    CSS 水平滚动条 bug css overflow & width auto increase bug 问题排查方式 删除可疑的模块,一步步找到问题的原因,定位问题所在 寻找可能会导致 wi ...

  7. 如何在没有显示器的情况下,查看 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 ...

  8. Apple Support

    Apple Support Send Files to Apple Support https://gigafiles.apple.com/#/customerupload refs 无法截屏 bug ...

  9. Prometheus Monitoring Solution

    Prometheus Monitoring Solution 普罗米修斯 https://prometheus.io/ 警报 监控 增强指标和警报 领先 开源监控解决方案 https://promet ...

  10. Web 网站安全测试 & 渗透测试

    Web 网站安全测试 & 渗透测试 Penetration Testing learning path 建一个测试环境来进行渗透测试 安装 Kali Linux -渗透测试操作系统 在虚拟机中 ...