vue2.0学习之组件间通信

Posted 2020-10-26 甜甜宝宝

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