Vue核心——组件Component

一， 什么是组件

组件的本质：

组件的本质是一段HTML代码，这段HTML代码会被当做模板，以便重复使用。

二，组件的创建

使用：
        必须声明，并注册后，才能使用。（下例为全局组件为例）

注意：
        组件中的HTML模板代码必须有一个唯一的根标签。

1，JS内部声明注册

原始写法

  //声明组件
  var tem1 = Vue.extend({
       template: '<div><h1>标题</h1><h2>子标题</h2> <p>内容</p></div>',
    });
    
   //注册组件
   Vue.component('com1', tem1)

简化写法

   Vue.component('com1', Vue.extend({
       template: '<div><h1>标题</h1><h2>子标题</h2> <p>内容</p></div>',
    });

最简化写法

   Vue.component('com1', {
       template: '<div><h1>标题</h1><h2>子标题</h2> <p>内容</p></div>',
    });

2，JS外部声明，内部注册

模板

<template id="tmpl">
    <div>
	      <h1>标题</h1>
	      <h2>子标题</h2>
	      <p>内容</p>
    </div>
 </template>

结合原始写法

  //声明组件
  var tem1 = Vue.extend({
       template: '#tmpl',
    });
    
   //注册组件
   Vue.component('com1', tem1)

结合简化写法

   Vue.component('com1', Vue.extend({
       template: '#tmpl',
    });

结合最简化写法

   Vue.component('com1', {
       template: '#tmpl',
    });

三，组件的调用

1，kebab-case横线连接命名

直接用横线连接命名的组件，调用时直接用标签的方式调用
注册

   //注册名为kebab-cased-component
   Vue.component('kebab-cased-component', {
       template: '#tmpl',
    });

调用

<template>
    <div>
	    <p>当前组件内容</p>
	    <keba-cased-component></keba-cased-component><!--调用kebab-cased-component组件-->
    </div>
</template>

2，PascalCase和camelCase命名

单词首字母大写拼接命名的组件，调用时大写的首字母替换为 -小写字母（第一个单词除外），
并以标签的方式调用
示例

PascalCase:
	<!--如下都是PascalCase命名,由多个单词拼接，每个单词首字母大写-->
	UserInfo
	UserName
	
camelCase:
	<!--如下都是camelCase命名,由多个单词拼接，首个单词小写，后面其他单词首字母大写-->
	userInfo
	userName

注册

	<!--注册名为camelCase类型-->
   Vue.component('camelCaseComponent', {
       template: '#tmpl',
    });
    <!--注册名为PascalCase类型-->
   Vue.component('PascalCaseComponent', {
       template: '#tmpl',
    });

调用

<template>
    <div>
	    <p>当前组件内容</p>
	    <camel-case-component></camel-case-component><!--调用camelCaseComponent组件-->
	    <pascal-case-component></pascal-case-component><!--调用pascalCaseComponent组件-->
    </div>
</template>

四，基于模块化系统开发中组件的调用

模块化系统开发会用到webpack和ES6的Module章节的知识，可以参考下ES6的文档。

1，注册组件

MyButton.vue代码

<template>
	<div>
		<!--假设这是一个按钮-->
		<h1>Button</h1>
	</div>
</template>
<script>
	//将当前页面中template模板组件公开出去，名称为button-com
    export default {
        name: "button-com",
    }
</script>

2，调用组件

Login.vue代码如下

<template>
	<div>
		<!--假设这是一个按钮-->
		<h1>Login模板组件内容</h1>
		<!--引用组件-->
		<button-com></button-com>
	</div>
</template>
<script>
	//将当前页面中template模板组件暴漏出去，名称为button-com
	import MyButton from "./mybutton";
    export default {
        name: "login-com",//当前组件名
        components:{
        	ButtonCom//引用的组件名，转换为PascalCase命名法
        }
    }
</script>