写在前面
- 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> 11import DateSpan from '@/components/DateSpanE' 12export 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> 43 44 45
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> 14import Api from '@/api_axios' 15import DateSpan from '@/components/DateSpanE' 16import { formatDate } from '@/common/util' 17import moment from 'moment' 18 19export default { 20 components: { 21 DateSpan 22 }, 23 props: { 24 // 定义父组件传入的prop 25 timeRange: { 26 type: Object, 27 default: () => { 28 return { 29 startDate: new Date(), 30 endDate: moment().add(17, 'w').toDate() 31 } 32 } 33 } 34 }, 35 data() { 36 return { 37 loading: true, 38 showModal: false, 39 // data中定义子组件日期范围组件所需的展示数据，默认取props中定义的值 40 timeRangeFromProps: this.timeRange 41 } 42 }, 43 computed: { 44 startDate() { 45 return this.timeRangeFromProps.startDate 46 }, 47 endDate() { 48 return this.timeRangeFromProps.endDate 49 } 50 }, 51 watch: { 52 // 监听传入的props值，props值更改时更新子组件数据 53 // 若无此监听，父组件修改日期后，子组件的日期范围得不到更新 54 timeRange() { 55 this.timeRangeFromProps = this.timeRange 56 } 57 }, 58 methods: { 59 changeDate(dateInfo) { 60 const { start: startDate, end: endDate } = dateInfo 61 this.timeRangeFromProps = { 62 startDate, 63 endDate 64 } 65 }, 66 toggle(isShow) { 67 this.showModal = isShow 68 }, 69 // ... 70 } 71} 72</script> 73<style lang="less"> 74.single-effect-modal { 75 .form-wrapper { 76 min-height: 100px; 77 } 78 79 .item-label { 80 min-width: 60px; 81 } 82} 83</style> 84 85 86 87
2. $parent $refs $emit
2.1 $refs访问子组件中的方法或属性
1<ActiveTakeEffect ref="activeModal" :timeRange="makeActiveTime" /> 2<script> 3this.$refs.activeModal.timeRangeFromProps // timeRangeFromProps是子组件中的属性 4this.$refs.activeModal.toggle(true) // toggle是子组件中的方法名 5</script> 6 7 8
2.1 $parent访问父组件中的方法或属性 $emit触发父组件中定义的方法
1// 子组件 2<script> 3this.$parent.makeActiveTime // makeActiveTime是父组件中的属性 4this.$parent.changeDate({startDate:xxx, endDate: xxx}) // changeDate是父组件中的方法名 5</script> 6 7 8
1// 父组件，忽略其他项 2<date-span @conditionChange="conditionChange"></date-span> 3<scipt> 4// ... 5methods: { 6 conditionChange(controlName) { 7 // ... 8 } 9} 10// ... 11</script> 12 13<script> 14// 子组件中调用 15this.$emit('conditionChange', 'dateSpan') 16</script> 17 18 19
3. mixins扩展使用
1// itemList就是来自treeSelectMixin中定义的数据 2<SwitchButton :itemList="itemList" @change="toggleSelectAll"></SwitchButton> 3<script> 4import mixin from './treeSelectMixin' 5 6export default { 7 mixins: [mixin], 8 components: { 9 Treeselect, 10 SwitchButton 11 }, 12 // ... 13} 14 15</script> 16 17 18
4. 样式的两种写法
1// 同一个.vue文件中可以出现以下两个style标签 2<style lang="less"> 3</style> 4// 当 `<style>` 标签有 `scoped` 属性时，它的 CSS 只作用于当前组件中的元素。 5<style lang="less" scoped> 6</style> 7 8 9
以上就是入门时困扰较多的地方~祝换乘顺利
作者：京东保险 黄晓丽
来源：京东云开发者社区 转载请注明来源