vue编写时的一些注意事项（4）(--组件封装以及父子组件通信)

组件封装

以下是vue项目中的写法以及用法，若想了解单页的写法请点击这里

1.封装一个简单的vue组件

	<template>
		<div class="newTemplate">我是一个小组件</div>
	</template>
	<script>
		export default {
			name:'newTemplate',
			data(){
				return {
					
				}
			},
		}
	</script>

·
这样，一个简单的组件就完成啦，引用的时候 ：

	import newTemplate from './test'

这里引用时候的名字可以和组件里面的变量一致，也可以不一致，（最好是一致，便于语义化）
·
组件里name不设置也可以。但是name的用处很大，可参考这里
·
注意：使用这个组件之前要注册到引用这个组件的vue实例的components中

	<!--当引用的名字和使用的名字 相同 时可以这样做-->
	components:{
		newTemplate 
	}
	<!--当引用的名字和使用的名字 不相同 时可以这样做-->
	components:{
		newName:newTemplate 
	}

这个组件的写法：短线分隔，小写

	<!--当然，直接写成 newName 也是没错的-->
	<new-name></new-name>

·
2.子组件与父组件的通信
·
上面我们定义了一个组件，并将它引用到了另一个vue实例中，这个引用它的vue实例就是 它的父组件，它则是这个vue实例的子组件
·
子组件也是一个vue实例，里面也能定义函数，data,父组件的数据如何传给子组件呢？ 使用 props

	<script>
		export default {
			props:{
				transferText:{
					type:String,
					default:''
				}
			},
		}
	</script>

props 写成这种对象形式的，可以很好的设置每一个参数的类型，以及默认值，能减少出错，或者在出错的时候及时提醒，当然也可以写成数组形式的

	<script>
		export default {
			props:['transferText']
		}
	</script>

props的使用：这个numberCode是父组件的数据

	<newTemplate :transferText="numberCode"></newTemplate>

·
子组件 -> 父组件传值
当父组件需要接受来自子组件的动作来触发某个特定事件或者接受子组件的来进行页面渲染时，此时需要用到 emmit 触发父组件的事件传值

	//子组件内部的data
	data(){
		return {
			type:'menuList'
		}
	},
	//在子组件内部定义一个函数
	methods:{
		finish(){
			//这个触发动作是 refresh
			this.emit('refresh',this.type)
		}
	}

·
在父组件中使用：

	<newTemplate @refresh="refreshListByType"></newTemplate>
	<!-- 这里的 refreshListByType 是父组件里面的函数,接收到 ‘refresh’ 这个动作就执行-->

·
refreshListByType 函数内部：

	refreshListByType(val){
		console.log(val)
		//此时的val 值为 ‘menuList’ ,即是子组件传过来的值
		......
	}

·
完整代码：

	<!--父组件的代码-->
	<template>
		<div class="newTemplate">我是父组件
			<newTemplate @refresh="refreshListByType" :transferText="numberCode" ></newTemplate>
		</div>
	</template>
	<script>
		import newTemplate from './test'
		export default {
			components:{
				newTemplate 
			},
			data(){
				return {
					numberCode:'3',
				}
			},
			methods:{
				refreshListByType(val){
					console.log(val)
					//此时的val 值为 ‘menuList’ ,即是子组件传过来的值
					......
				}
			}
		}
	</script>
	
	<!--子组件的代码 test.vue-->
	<template>
		<div class="newTemplate">我是一个小组件 {{transferText}}</div>
	</template>
	<script>
		export default {
			props:{
				transferText:{
					type:String,
					default:''
				}
			},
			name:'newTemplate',
			data(){
				return {
					type:'menuList'
				}
			},
			//在子组件内部定义一个函数
			methods:{
				finish(){
					//这个触发动作是 refresh
					this.emit('refresh',this.type)
				}
			}
		}
	</script>

·
上面是个简单的组件的封装的实例，以及父子组件的通信