React技术栈支援Vue项目,你需要提前了解的 | 京东云技术团队

写在前面

  • react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,而vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听, 当属性变化的时候,响应式的更新对应的虚拟dom

  • react的思路通过js来生成html, 所以设计了jsx,还有通过js来操作css。vue是自己写了一套模板编译的逻辑,可以把js css html糅合到一个模板里边

  • react可以通过高阶组件来扩展,而vue需要通过mixins来扩展

频繁用到的场景

1. 数据传递:父传子,父更新子如何取得新数据

父组件中有一个表单日期组件,子组件是一个弹层(弹层中有日期组件,默认值取父组件选中的日期),父组件更改日期范围后,子组件打开默认日期也需要更新。如下:

xml 复制代码
// 父组件
<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>
xml 复制代码
// 子组件
<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访问子组件中的方法或属性

xml 复制代码
<ActiveTakeEffect ref="activeModal" :timeRange="makeActiveTime" />
<script>
this.$refs.activeModal.timeRangeFromProps // timeRangeFromProps是子组件中的属性
this.$refs.activeModal.toggle(true) // toggle是子组件中的方法名
</script>

2.1 $parent访问父组件中的方法或属性 $emit触发父组件中定义的方法

kotlin 复制代码
// 子组件
<script>
this.$parent.makeActiveTime // makeActiveTime是父组件中的属性
this.$parent.changeDate({startDate:xxx, endDate: xxx}) // changeDate是父组件中的方法名
</script>
typescript 复制代码
// 父组件,忽略其他项
<date-span @conditionChange="conditionChange"></date-span>
<scipt>
// ...
methods: {
  conditionChange(controlName) {
    // ...
  }
}
// ...
</script>

<script>
// 子组件中调用
this.$emit('conditionChange', 'dateSpan')
</script>

3. mixins扩展使用

typescript 复制代码
// itemList就是来自treeSelectMixin中定义的数据
<SwitchButton :itemList="itemList" @change="toggleSelectAll"></SwitchButton>
<script>
import mixin from './treeSelectMixin'

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

</script>

4. 样式的两种写法

xml 复制代码
// 同一个.vue文件中可以出现以下两个style标签
<style lang="less">
</style>
// 当 `<style>` 标签有 `scoped` 属性时,它的 CSS 只作用于当前组件中的元素。
<style lang="less" scoped>
</style>

以上就是入门时困扰较多的地方~祝换乘顺利

作者:京东零售 黄晓丽

来源:京东云开发者社区 转载请注明来源

相关推荐
小马哥编程35 分钟前
原型链(Prototype Chain)入门
css·vue.js·chrome·node.js·原型模式·chrome devtools
cwj&xyp1 小时前
Python(二)str、list、tuple、dict、set
前端·python·算法
dlnu20152506221 小时前
ssr实现方案
前端·javascript·ssr
古木20192 小时前
前端面试宝典
前端·面试·职场和发展
轻口味3 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王4 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发4 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀4 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪5 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word