vue2.0学习之组件间通信
/* 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>
以上是 vue2.0学习之组件间通信 的全部内容, 来源链接: utcz.com/z/376627.html