这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战

Vue组件

组件（component）是Vue.js最强大的功能之一，可以扩展HTML元素，封装可重用的代码。

全局组件

Vue.extend（）是Vue构造器的扩展，调用Vue.extend（）创建的是一个组件构造器，而不是一个具体的组件实例。
Vue.extend（）构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。
使用Vue.component（）注册组件时，需要提供2个参数，第1个参数是组件的标签，第2个参数是组件构造器。
Vue.component（）方法内部会调用组件构造器，创建一个组件实例。·组件应该挂载到某个Vue实例下，否则它不会生效。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<aa></aa>
			<bb></bb>
		</div>
		
		<script>
			//普通注册
			Vue.component('aa',
			{
				template:'<h1>123</h1>'
			},)
			//创建组件构造器
			var rong = Vue.extend({
				template:'<h2>123</h2>'
			})
			Vue.component('bb',rong)
			new Vue({
				el:"#app"
			})
		</script>
	</body>
</html>

局部组件

调用Vue.component（）注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。

可以用选项对象的components属性实现局部注册。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<aa></aa>
		</div>
		<script>
			var rong={
				template:'<h1>abc</h1>'
				}
			new Vue({
				el:"#app",
				components:{
					'aa':rong
				}
			})
		</script>
	</body>
</html>

props属性

props是父组件用来传递数据的一个自定义属性。父组件的数据需要通过props属性传给子组件，子组件需要显式地用props选项声明"props"。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<aa txt="123"></aa>
			
		</div>
		
		<script>
			//普通注册
			Vue.component('aa',
			{
				props:['txt'],
				template:'<h1>{{txt}}</h1>'
			})

			new Vue({
				el:"#app"
			})
		</script>
	</body>
</html>

动态props

类似于用v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中。当父组件的数据变化时，也会将该变化传递给子组件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 双向绑定属性 -->
			<input v-model="mess"/><br>
			{{mess}}
			<!-- 改变输入框的值 内容跟着改变 -->
			<aa v-bind:txt="mess"></aa>
		</div>
		<script>
			Vue.component('aa',{
				props:['txt'],
				template:'<h1>{{txt}}</h1>'
			})
			new Vue({
				el:"#app",
				data:{
					mess:''
				}
			})
		</script>
	</body>
</html>