写在前面
- 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>
以上就是入门时困扰较多的地方~祝换乘顺利
作者：京东保险 黄晓丽
来源：京东云开发者社区 转载请注明来源
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。
