【Vue】vue.js中组件的使用

---

组件

• 组件 (Component) 是 Vue.js 最强大的功能之一。
• 组件可以扩展 HTML 元素， 封装可重用的代码。
• 在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特 殊功能。

创建全局组件

方式一：Vue.extend({}),Vue.component()

1. 创建组件：使用Vue.extend({})

var com1 = Vue.extend({
	 template: `<h2>这是用Vue.extend创建的组件</h2>`
})

2. 注册组件：使用Vue.component('组件的名称', 创建出来的组件模板对象)

Vue.component('myCom1',com1);

3. 使用组件：
   如果使用 Vue.Component 注册全局组件的时候，组件的名称使用了驼峰命名，则 在引用组件的时候需要把大写的驼峰改为小写的字母，同时，两个单词之前，使用 “–” 连接。如果不使用则直接拿名称来使用即可。

<div id="root">
    <my-com1></my-com1>
</div>

<script>
    var com1 = Vue.extend({
     
        template: `<h2>这是用Vue.extend创建的组件</h2>`
    })
    Vue.component</