写在前面

• 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> 

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

作者：京东保险 黄晓丽

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