寫在前面

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

頻繁用到的場景

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

父組件中有一個表單日期組件，子組件是一個彈層（彈層中有日期組件，默認值取父組件選中的日期），父組件更改日期范圍后，子組件打開默認日期也需要更新。如下：t5F28資訊網——每日最新資訊28at.com

// 父組件<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>

以上就是入門時困擾較多的地方~祝換乘順利t5F28資訊網——每日最新資訊28at.com

作者：京東零售 黃曉麗t5F28資訊網——每日最新資訊28at.com

來源：京東云開發者社區 轉載請注明來源t5F28資訊網——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-15225-0.htmlReact技術棧支援Vue項目，你需要提前了解的

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 別再學那些落后的 Web 開發技術了 ！

下一篇： 分布式實時處理系統的架構設計，工作原理和實現方式