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

2023-10-24
北京
本文字数：2381 字
阅读完需：约 8 分钟

写在前面

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>

复制代码

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

作者：京东保险黄晓丽
来源：京东云开发者社区转载请注明来源

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/74e6ab0bc60b8c874268d7b41】。文章转载请联系作者。

京东科技开发者

关注

拥抱技术，与开发者携手创造未来！ 2018-11-20 加入

我们将持续为人工智能、大数据、云计算、物联网等相关领域的开发者，提供技术干货、行业技术内容、技术落地实践等文章内容。京东云开发者社区官方网站【https://developer.jdcloud.com/】，欢迎大家来玩

发布

暂无评论

创作场景

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

写在前面

频繁用到的场景

1. 数据传递：父传子，父更新子如何取得新数据

2. $parent $refs $emit

2.1 $refs访问子组件中的方法或属性

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

3. mixins 扩展使用

4. 样式的两种写法

京东科技开发者

评论

2. `$parent` `$refs` `$emit`

2.1 `$refs`访问子组件中的方法或属性

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