React技術棧支援Vue項目，你需要提前了解的

作者：京東云開發者 2023-10-26 07:37:18

父組件中有一個表單日期組件，子組件是一個彈層（彈層中有日期組件，默認值取父組件選中的日期），父組件更改日期范圍后，子組件打開默認日期也需要更新。

寫在前面

react整體是函數式的思想，把組件設計成純組件，狀態和邏輯通過參數傳入，而vue的思想是響應式的，也就是基于是數據可變的，通過對每一個屬性建立Watcher來監聽，當屬性變化的時候，響應式的更新對應的虛擬dom
react的思路通過js來生成html，所以設計了jsx，還有通過js來操作css。vue是自己寫了一套模板編譯的邏輯，可以把js css html糅合到一個模板里邊
react可以通過高階組件來擴展，而vue需要通過mixins來擴展

頻繁用到的場景

1. 數據傳遞：父傳子，父更新子如何取得新數據

父組件中有一個表單日期組件，子組件是一個彈層（彈層中有日期組件，默認值取父組件選中的日期），父組件更改日期范圍后，子組件打開默認日期也需要更新。如下：

// 父組件
<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中定義子組件日期范圍組件所需的展示數據，默認取props中定義的值
      timeRangeFromProps: this.timeRange
    }
  },
  computed: {
    startDate() {
      return this.timeRangeFromProps.startDate
    },
    endDate() {
      return this.timeRangeFromProps.endDate
    }
  },
  watch: {
    // 監聽傳入的props值，props值更改時更新子組件數據
    // 若無此監聽，父組件修改日期后，子組件的日期范圍得不到更新
    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訪問子組件中的方法或屬性

<ActiveTakeEffect ref="activeModal" :timeRange="makeActiveTime" />
<script>
this.$refs.activeModal.timeRangeFromProps // timeRangeFromProps是子組件中的屬性
this.$refs.activeModal.toggle(true) // toggle是子組件中的方法名
</script>

2.1 $parent訪問父組件中的方法或屬性 $emit觸發父組件中定義的方法

// 子組件
<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>
// 子組件中調用
this.$emit('conditionChange', 'dateSpan')
</script>

3. mixins擴展使用

// itemList就是來自treeSelectMixin中定義的數據
<SwitchButton :itemList="itemList" @change="toggleSelectAll"></SwitchButton>
<script>
import mixin from './treeSelectMixin'

export default {
  mixins: [mixin],
  components: {
    Treeselect,
    SwitchButton
  },
  // ...
}

</script>

4. 樣式的兩種寫法

// 同一個.vue文件中可以出現以下兩個style標簽
<style lang="less">
</style>
// 當 `<style>` 標簽有 `scoped` 屬性時，它的 CSS 只作用于當前組件中的元素。
<style lang="less" scoped>
</style>

以上就是入門時困擾較多的地方~祝換乘順利

作者：京東零售黃曉麗
來源：京東云開發者社區轉載請注明來源

責任編輯：武曉燕來源：今日頭條