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>

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

作者:京东零售 黄晓丽

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

相关推荐
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试