/* child.vue*/
子组件
<template>
<div>
/*必须要用div包裹起来，然后在里面写需要的组件内容，这里面和平常写的html是一样的*/
<div>
</template>
<script>
/*这里面写vue*/
/*引入其他vue组件*/
@import header from "./header.vue" //在components 中要引入才能使用
export default{
props: { /*props里面的是接口，以便于在其他页面中传入参数*/
size: {
type: Number
},
seller:{
type:{}
}
},
data() {
return {
/*这里写的数据，相当于new Vue里面的data*/
date:"2017-10-13"
}
},
methods: {
detail: function(){
console.log("方法")
}
},
/*这里也可以写钩子函数*/
components: {
header
},
//computed 计算属性，里面放一些业务逻辑代码，一定要return
computed: {
setDate() {
return this.date
}
}
}
</script>
<style>
/*这里面写css样式*/
/*引入其他css样式*/
@import "./common.css"
</style>
组件中引入其他vue组件和css样式要使用@import
两个组件之间通信
// 父组件传seller和size给子组件，其中size为数值，seller为通过http请求得到的
<template>
/*:size 是上面的props中的参数 score 也是传入数据给子组件使用 */
<div :size="5" :score ="score" :seller="seller">
</div>
</template>
<script>
@import header from "./child.vue"
export default {
props:{
size:{
type:Number
},
score:{
type:Number
}
}
}
</script>