step1:C:\Users\Windows\WebstormProjects\a\untitled\src\App.vue
<template>
<img style="background: aqua" alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
step2:C:\Users\Windows\WebstormProjects\a\untitled\src\components\HelloWorld.vue
<template>
<div>
<v-header :title='newTitle'></v-header>
<div class='confirm' style="background: antiquewhite" @click="lockSeat()">
<!-- 引入公共模板结束 -->
确认选座
</div>
</div>
</template>
<script>
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
// 例如:import 《组件名称》 from '《组件路径》';
// 引入共用头部组件
import header from '../components/headerOne.vue'
export default {
// import引入的组件需要注入到对象中才能使用
components: {'v-header': header},
props: {
propSelectedSeat: Array,
propSeatList: Array,
propIsCheap: Number,
propServiceFee: String,
propPlanId: String
},
data() {
// 这里存放数据
return {
selectedSeat: this.propSelectedSeat,
seatList: this.propSeatList,
newTitle: "抢购页面"
}
},
// 监听属性 类似于data概念
computed: {
chPrice() {
let totalPrice = 0
let selectedSeat = this.selectedSeat
for (const iterator of selectedSeat) {
totalPrice += parseInt(iterator.price)
}
return totalPrice
},
seatIdList() {
let seatIdList = []
let selectedSeat = this.selectedSeat
for (const iterator of selectedSeat) {
seatIdList.push(iterator.id)
}
return seatIdList
}
},
// 监控data中的数据变化
watch: {
propSelectedSeat: function () {
this.selectedSeat = this.propSelectedSeat
},
propSeatList: function () {
this.seatList = this.propSeatList
},
propIsCheap: function (value) {
this.isCheap = value
},
propServiceFee: function (value) {
this.serviceFee = value
},
propPlanId: function (value) {
this.planId = value
}
},
// 方法集合
methods: {
lockSeat: function () {
},
createOrder() {
alert('在这里开始走锁座逻辑')
},
// 检查每个座位是否会留下空位
checkSeat: function (element) {
return element
},
// 检查左右侧座位满足规则状态
checkSeatDirection: function (gRowBasic, gColBasic, checkNum, direction) {
console.log(gRowBasic, gColBasic, checkNum, direction)
return null
}
},
created() {
console.log('created创建完成')
},
mounted() {
console.log('mounted - 挂载完成(可以访问DOM元素)')
},
beforeCreate() {
console.log('beforeCreate - 创建之前')
},
beforeMount() {
console.log('beforeMount - 挂载之前')
},
beforeUpdate() {
console.log('beforeUpdate - 更新之前')
},
updated() {
console.log('updated - 更新之后')
},
beforeUnmount() {
console.log('beforeUnmount - 销毁之前')
},
unmounted() {
console.log('unmounted - 销毁完成')
},
activated() {
console.log(' 如果页面有keep-alive缓存功能,activated这个函数会触发')
}
}
</script>
step3:C:\Users\Windows\WebstormProjects\a\untitled\src\components\headerOne.vue
<template>
<div>
<header>
<div class="tool_header">
<!-- <i class="iconfont icon-fanhui" @click="fanhui"></i> -->
<span style="font-size: large;background: red">{{newTitle}}</span>
</div>
</header>
<!-- 此处是占位符 -->
<div class="zanweifu"></div>
</div>
</template>
<script>
export default {
name: 'headerTwo',
data: function() {
return {
name: '',
}
},
props:{
title:String,
},
computed:{
newTitle(){
return this.title
}
},
}
</script>