【Vue】-05-组件component

---

前言

VUE组件就是自定义html标签。
用户可以通过自定义组件实现导航栏、页眉、页脚等功能。

---

一、自定义组件

Vue.component("自定义名称",template: '模板内容');
自定义名称要求

1.全小写
2.驼峰式命名法要求html标签用横杠分开

全局组件

所有实例都能用全局组件。

我尝试在一个html写两个全局组件结果第二个全局组件报错，说没有正确注册。

		<div id="app">
			<my-component></my-component>
		</div>

    <script>
			Vue.component("myComponent", {
				template: '<h1>helo</h1>'
			});
    </script>

局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

		<div id="app">
			<!-- <my-component></my-component> -->
			<test-Props></test-Props>
		</div>

		<script>
			var testProps = {
				template: '<h1>hello,testProps</h1>'
			}
			var vm = new Vue({
				el: "#app",
				data: {},
				components: {
					"testProps": testProps
				}
			});
		</script>

二、属性

props属性

组件与组件之间实现数据传递，需要借助工具（如：props属性）
props传值，父传子

		<div id="app">
			<test-Props name="被传递的参数"></test-Props>
		</div>

		<script>
			var testProps = {
				props: ['name'],
				template: '<h1>{{name}}</h1>'
			}
			var vm = new Vue({
				el: "#app",
				data: {},
				components: {
					"testProps": testProps
				}
			});
		</script>

当然，也不一定非得是用“name”属性传递，随意任何名字只要对应即可，

		<div id="app">
			<!-- <my-component></my-component> -->
			<test-Props asd="被传递的参数"></test-Props>
		</div>

		<script>
			var testProps = {
				props: ['asd'],
				template: '<h1>{{asd}}</h1>'
			}
			var vm = new Vue({
				el: "#app",
				data: {},
				components: {
					"testProps": testProps
				}
			});
		</script>