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>