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>