Vue框架之组件

◆ 组件：

组件 (Component) 是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装后可以进行重用。

◆ 组件注册：

1、全局注册：

全局组件注册后，任何vue实例都可以用

Vue.component('组件名称', { })

第1个参数是标签名称，第2个参数是一个选项对象

<div id="example">
  <!--  组件使用 组件名称 是以HTML标签的形式使用  -->  
  <my-component></my-component>
</div>
<script>
    //   注册组件 
    //  my-component 就是组件中自定义的标签名
	Vue.component('my-component', {
      template: '<div>A custom component!</div>'
    })

    // 创建根实例
    new Vue({
      el: '#example'
    })

</script>

组件注意事项：

• 组件参数的data值必须是函数同时这个函数要求返回一个对象
• 组件模板必须是单个根元素
• 组件模板的内容可以是模板字符串

<div id="app">
     <!-- 
		4、  组件可