vue2.0学习之组件间通信

vue

/* 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

回到顶部