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. OkHttp Client Ignore certificate

    import okhttp3.*; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import javax.net.ssl.*; i ...

  2. Databricks 第11篇:Spark SQL 查询(行转列、列转行、Lateral View、排序)

    本文分享在Azure Databricks中如何实现行转列和列转行. 一,行转列 在分组中,把每个分组中的某一列的数据连接在一起: collect_list:把一个分组中的列合成为数组,数据不去重,格 ...

  3. js中for循环遍历的写法

    众所周知,for循环是编程中必不可少的知识点:那么如何高效的写出循环呢? 我们要先知道for循环的基础样式是由自有变量自增自减和if判组成的: 1 for(条件){ 2 执行语句 3 } 而for循环 ...

  4. Cobbler自定义标题及菜单密码

    sha1pass mypassword || openssl passwd -1 -salt sXiKzkus mypassword $1$sXiKzkus$x12Z3ZaiC34GhceLH5LXw ...

  5. Kubernetes安装EFK教程(非存储持久化方式部署)

    1.简介 这里所指的EFK是指:ElasticSearch,Fluentd,Kibana ElasticSearch Elasticsearch是一个基于Apache Lucene的开源搜索和数据分析 ...

  6. Leetcode(104)-二叉树的最大深度

    给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数. 说明: 叶子节点是指没有子节点的节点. 示例:给定二叉树 [3,9,20,null,null,15,7], ...

  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 ...

  8. 让你像黑客一样写代码(not really)

    让你像黑客一样写代码(not really) http://poznan.tvp.pl 这是一个波兰的视频网站. poznan 波兹南(波兰城市 视屏链接 http://video.sina.com. ...

  9. 技术分享: Canvas 系列

    技术分享: Canvas 系列 SVG 导出 分享截图 加密水印 游戏 场馆图,选派选座 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可 ...

  10. 钉钉 & URL Scheme & Universal Link & Deep Link

    钉钉 & URL Scheme & Universal Link & Deep Link DD link https://www.cnblogs.com/xgqfrms/p/1 ...