经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » React » 查看文章
React技术栈支援Vue项目,你需要提前了解的
来源:cnblogs  作者:京东云开发者  时间:2023/10/25 12:27:55  对本文有异议

写在前面

  • react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,而vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听, 当属性变化的时候,响应式的更新对应的虚拟dom
  • react的思路通过js来生成html, 所以设计了jsx,还有通过js来操作css。vue是自己写了一套模板编译的逻辑,可以把js css html糅合到一个模板里边
  • react可以通过高阶组件来扩展,而vue需要通过mixins来扩展

频繁用到的场景

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

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

  1. // 父组件
  2. <template>
  3. <div>
  4. <date-span style="flex-grow: 1" ref="dateSpanE" :noCache="true" :startDate="startDate"
  5. :endDate="endDate" type="weekrange" @change="changeDate"></date-span>
  6. <!-- 子弹层组件 -->
  7. <ActiveTakeEffect ref="activeModal" :timeRange="makeActiveTime" />
  8. </div>
  9. </template>
  10. <script>
  11. import DateSpan from '@/components/DateSpanE'
  12. export default {
  13. components: { DateSpan },
  14. // ...
  15. data: () => {
  16. return {
  17. makeActiveTime: {
  18. startDate: '',
  19. endDate: ''
  20. },
  21. }
  22. },
  23. computed: {
  24. startDate() {
  25. return this.makeActiveTime.startDate
  26. },
  27. endDate() {
  28. return this.makeActiveTime.endDate
  29. }
  30. },
  31. methods: {
  32. // 父组件表单日期修改时更新了传入的日期
  33. changeDate(dateInfo) {
  34. const { start: startDate, end: endDate } = dateInfo
  35. this.makeActiveTime = {
  36. startDate,
  37. endDate
  38. }
  39. }
  40. }
  41. }
  42. </script>
  1. // 子组件
  2. <template>
  3. <Modal v-model="showModal" width="680" title="XXX" :mask-closable="false" @on-visible-change="visibleChange"
  4. :loading="loading">
  5. <div class="single-effect-modal">
  6. <div class="form-wrapper">
  7. <date-span style="flex-grow: 1" ref="dateSpanE" :noCache="true" :startDate="startDate" :endDate="endDate"
  8. type="weekrange" @change="changeDate"></date-span>
  9. </div>
  10. </div>
  11. </Modal>
  12. </template>
  13. <script>
  14. import Api from '@/api_axios'
  15. import DateSpan from '@/components/DateSpanE'
  16. import { formatDate } from '@/common/util'
  17. import moment from 'moment'
  18. export default {
  19. components: {
  20. DateSpan
  21. },
  22. props: {
  23. // 定义父组件传入的prop
  24. timeRange: {
  25. type: Object,
  26. default: () => {
  27. return {
  28. startDate: new Date(),
  29. endDate: moment().add(17, 'w').toDate()
  30. }
  31. }
  32. }
  33. },
  34. data() {
  35. return {
  36. loading: true,
  37. showModal: false,
  38. // data中定义子组件日期范围组件所需的展示数据,默认取props中定义的值
  39. timeRangeFromProps: this.timeRange
  40. }
  41. },
  42. computed: {
  43. startDate() {
  44. return this.timeRangeFromProps.startDate
  45. },
  46. endDate() {
  47. return this.timeRangeFromProps.endDate
  48. }
  49. },
  50. watch: {
  51. // 监听传入的props值,props值更改时更新子组件数据
  52. // 若无此监听,父组件修改日期后,子组件的日期范围得不到更新
  53. timeRange() {
  54. this.timeRangeFromProps = this.timeRange
  55. }
  56. },
  57. methods: {
  58. changeDate(dateInfo) {
  59. const { start: startDate, end: endDate } = dateInfo
  60. this.timeRangeFromProps = {
  61. startDate,
  62. endDate
  63. }
  64. },
  65. toggle(isShow) {
  66. this.showModal = isShow
  67. },
  68. // ...
  69. }
  70. }
  71. </script>
  72. <style lang="less">
  73. .single-effect-modal {
  74. .form-wrapper {
  75. min-height: 100px;
  76. }
  77. .item-label {
  78. min-width: 60px;
  79. }
  80. }
  81. </style>

2. $parent $refs $emit

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

  1. <ActiveTakeEffect ref="activeModal" :timeRange="makeActiveTime" />
  2. <script>
  3. this.$refs.activeModal.timeRangeFromProps // timeRangeFromProps是子组件中的属性
  4. this.$refs.activeModal.toggle(true) // toggle是子组件中的方法名
  5. </script>

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

  1. // 子组件
  2. <script>
  3. this.$parent.makeActiveTime // makeActiveTime是父组件中的属性
  4. this.$parent.changeDate({startDate:xxx, endDate: xxx}) // changeDate是父组件中的方法名
  5. </script>
  1. // 父组件,忽略其他项
  2. <date-span @conditionChange="conditionChange"></date-span>
  3. <scipt>
  4. // ...
  5. methods: {
  6. conditionChange(controlName) {
  7. // ...
  8. }
  9. }
  10. // ...
  11. </script>
  12. <script>
  13. // 子组件中调用
  14. this.$emit('conditionChange', 'dateSpan')
  15. </script>

3. mixins扩展使用

  1. // itemList就是来自treeSelectMixin中定义的数据
  2. <SwitchButton :itemList="itemList" @change="toggleSelectAll"></SwitchButton>
  3. <script>
  4. import mixin from './treeSelectMixin'
  5. export default {
  6. mixins: [mixin],
  7. components: {
  8. Treeselect,
  9. SwitchButton
  10. },
  11. // ...
  12. }
  13. </script>

4. 样式的两种写法

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

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

作者:京东保险 黄晓丽

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

原文链接:https://www.cnblogs.com/Jcloud/p/17784019.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号