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>