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="" ...
随机推荐
- OkHttp Client Ignore certificate
import okhttp3.*; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import javax.net.ssl.*; i ...
- Databricks 第11篇:Spark SQL 查询(行转列、列转行、Lateral View、排序)
本文分享在Azure Databricks中如何实现行转列和列转行. 一,行转列 在分组中,把每个分组中的某一列的数据连接在一起: collect_list:把一个分组中的列合成为数组,数据不去重,格 ...
- js中for循环遍历的写法
众所周知,for循环是编程中必不可少的知识点:那么如何高效的写出循环呢? 我们要先知道for循环的基础样式是由自有变量自增自减和if判组成的: 1 for(条件){ 2 执行语句 3 } 而for循环 ...
- Cobbler自定义标题及菜单密码
sha1pass mypassword || openssl passwd -1 -salt sXiKzkus mypassword $1$sXiKzkus$x12Z3ZaiC34GhceLH5LXw ...
- Kubernetes安装EFK教程(非存储持久化方式部署)
1.简介 这里所指的EFK是指:ElasticSearch,Fluentd,Kibana ElasticSearch Elasticsearch是一个基于Apache Lucene的开源搜索和数据分析 ...
- Leetcode(104)-二叉树的最大深度
给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数. 说明: 叶子节点是指没有子节点的节点. 示例:给定二叉树 [3,9,20,null,null,15,7], ...
- h5py/__init__.py:36: FutureWarning: Conversion of the second argument of issubdtype from `float` to `np.floating` is deprecated
Reference 问题 ... h5py/__init__.py:36: FutureWarning: Conversion of the second argument of issubdtype ...
- 让你像黑客一样写代码(not really)
让你像黑客一样写代码(not really) http://poznan.tvp.pl 这是一个波兰的视频网站. poznan 波兹南(波兰城市 视屏链接 http://video.sina.com. ...
- 技术分享: Canvas 系列
技术分享: Canvas 系列 SVG 导出 分享截图 加密水印 游戏 场馆图,选派选座 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可 ...
- 钉钉 & URL Scheme & Universal Link & Deep Link
钉钉 & URL Scheme & Universal Link & Deep Link DD link https://www.cnblogs.com/xgqfrms/p/1 ...