React技術(shù)棧支援Vue項目，你需要提前了解的
作者：京東云開發(fā)者
父組件中有一個表單日期組件，子組件是一個彈層（彈層中有日期組件，默認值取父組件選中的日期），父組件更改日期范圍后，子組件打開默認日期也需要更新。
寫在前面
- react整體是函數(shù)式的思想，把組件設(shè)計成純組件，狀態(tài)和邏輯通過參數(shù)傳入，而vue的思想是響應(yīng)式的，也就是基于是數(shù)據(jù)可變的，通過對每一個屬性建立Watcher來監(jiān)聽， 當屬性變化的時候，響應(yīng)式的更新對應(yīng)的虛擬dom
- react的思路通過js來生成html， 所以設(shè)計了jsx，還有通過js來操作css。vue是自己寫了一套模板編譯的邏輯，可以把js css html糅合到一個模板里邊
- react可以通過高階組件來擴展，而vue需要通過mixins來擴展
頻繁用到的場景
1. 數(shù)據(jù)傳遞：父傳子，父更新子如何取得新數(shù)據(jù)
父組件中有一個表單日期組件，子組件是一個彈層（彈層中有日期組件，默認值取父組件選中的日期），父組件更改日期范圍后，子組件打開默認日期也需要更新。如下：
// 父組件
<template>
<div>
<date-span style="flex-grow: 1" ref="dateSpanE" :noCache="true" :startDate="startDate"
:endDate="endDate" type="weekrange" @change="changeDate"></date-span>
<!-- 子彈層組件 -->
<ActiveTakeEffect ref="activeModal" :timeRange="makeActiveTime" />
</div>
</template>
<script>
import DateSpan from '@/components/DateSpanE'
export default {
components: { DateSpan },
// ...
data: () => {
return {
makeActiveTime: {
startDate: '',
endDate: ''
},
}
},
computed: {
startDate() {
return this.makeActiveTime.startDate
},
endDate() {
return this.makeActiveTime.endDate
}
},
methods: {
// 父組件表單日期修改時更新了傳入的日期
changeDate(dateInfo) {
const { start: startDate, end: endDate } = dateInfo
this.makeActiveTime = {
startDate,
endDate
}
}
}
}
</script>// 子組件
<template>
<Modal v-model="showModal" width="680" title="XXX" :mask-closable="false" @on-visible-change="visibleChange"
:loading="loading">
<div class="single-effect-modal">
<div class="form-wrapper">
<date-span style="flex-grow: 1" ref="dateSpanE" :noCache="true" :startDate="startDate" :endDate="endDate"
type="weekrange" @change="changeDate"></date-span>
</div>
</div>
</Modal>
</template>
<script>
import Api from '@/api_axios'
import DateSpan from '@/components/DateSpanE'
import { formatDate } from '@/common/util'
import moment from 'moment'
export default {
components: {
DateSpan
},
props: {
// 定義父組件傳入的prop
timeRange: {
type: Object,
default: () => {
return {
startDate: new Date(),
endDate: moment().add(17, 'w').toDate()
}
}
}
},
data() {
return {
loading: true,
showModal: false,
// data中定義子組件日期范圍組件所需的展示數(shù)據(jù)，默認取props中定義的值
timeRangeFromProps: this.timeRange
}
},
computed: {
startDate() {
return this.timeRangeFromProps.startDate
},
endDate() {
return this.timeRangeFromProps.endDate
}
},
watch: {
// 監(jiān)聽傳入的props值，props值更改時更新子組件數(shù)據(jù)
// 若無此監(jiān)聽，父組件修改日期后，子組件的日期范圍得不到更新
timeRange() {
this.timeRangeFromProps = this.timeRange
}
},
methods: {
changeDate(dateInfo) {
const { start: startDate, end: endDate } = dateInfo
this.timeRangeFromProps = {
startDate,
endDate
}
},
toggle(isShow) {
this.showModal = isShow
},
// ...
}
}
</script>
<style lang="less">
.single-effect-modal {
.form-wrapper {
min-height: 100px;
}
.item-label {
min-width: 60px;
}
}
</style>2. $parent$refs$emit
2.1 $refs訪問子組件中的方法或?qū)傩?/h2><ActiveTakeEffect ref="activeModal" :timeRange="makeActiveTime" />
<script>
this.$refs.activeModal.timeRangeFromProps // timeRangeFromProps是子組件中的屬性
this.$refs.activeModal.toggle(true) // toggle是子組件中的方法名
</script>
2.1 $parent訪問父組件中的方法或?qū)傩?$emit觸發(fā)父組件中定義的方法
// 子組件
<script>
this.$parent.makeActiveTime // makeActiveTime是父組件中的屬性
this.$parent.changeDate({startDate:xxx, endDate: xxx}) // changeDate是父組件中的方法名
</script>
// 父組件，忽略其他項
<date-span @conditionChange="conditionChange"></date-span>
<scipt>
// ...
methods: {
conditionChange(controlName) {
// ...
}
}
// ...
</script>
<script>
// 子組件中調(diào)用
this.$emit('conditionChange', 'dateSpan')
</script>
3. mixins擴展使用
// itemList就是來自treeSelectMixin中定義的數(shù)據(jù)
<SwitchButton :itemList="itemList" @change="toggleSelectAll"></SwitchButton>
<script>
import mixin from './treeSelectMixin'
export default {
mixins: [mixin],
components: {
Treeselect,
SwitchButton
},
// ...
}
</script>
4. 樣式的兩種寫法
// 同一個.vue文件中可以出現(xiàn)以下兩個style標簽
<style lang="less">
</style>
// 當 `<style>` 標簽有 `scoped` 屬性時，它的 CSS 只作用于當前組件中的元素。
<style lang="less" scoped>
</style>
<ActiveTakeEffect ref="activeModal" :timeRange="makeActiveTime" />
<script>
this.$refs.activeModal.timeRangeFromProps // timeRangeFromProps是子組件中的屬性
this.$refs.activeModal.toggle(true) // toggle是子組件中的方法名
</script>// 子組件
<script>
this.$parent.makeActiveTime // makeActiveTime是父組件中的屬性
this.$parent.changeDate({startDate:xxx, endDate: xxx}) // changeDate是父組件中的方法名
</script>// 父組件，忽略其他項
<date-span @conditionChange="conditionChange"></date-span>
<scipt>
// ...
methods: {
conditionChange(controlName) {
// ...
}
}
// ...
</script>
<script>
// 子組件中調(diào)用
this.$emit('conditionChange', 'dateSpan')
</script>// itemList就是來自treeSelectMixin中定義的數(shù)據(jù)
<SwitchButton :itemList="itemList" @change="toggleSelectAll"></SwitchButton>
<script>
import mixin from './treeSelectMixin'
export default {
mixins: [mixin],
components: {
Treeselect,
SwitchButton
},
// ...
}
</script>// 同一個.vue文件中可以出現(xiàn)以下兩個style標簽
<style lang="less">
</style>
// 當 `<style>` 標簽有 `scoped` 屬性時，它的 CSS 只作用于當前組件中的元素。
<style lang="less" scoped>
</style>以上就是入門時困擾較多的地方~祝換乘順利
作者：京東零售 黃曉麗
來源：京東云開發(fā)者社區(qū) 轉(zhuǎn)載請注明來源
責任編輯：武曉燕
來源：
今日頭條
