网页上的 组成部分 成为组件 （用户去定义的）
Vue中的组件如何定义 1，组件也是Vue实例（不是显式new Vue）,所以 实例有的属性和方法组件都有 如何定义组件 对象？ const CommonHead = { data:, methods, watch, computed } 组件挂载（组件在没有挂载前只是一个普通的对象，new Vue） 全局挂载 （挂载到 Vue） 在任意一个地方（el:"#app"）控制范围都可以使用 Vue.component("CommonHead",CommonHead) 注意：组件名建议使用大驼峰 局部挂载 （在其他组件中挂载，此时只能在挂载组件的模板中使用这个组件） // 定义logo组件 const Logo = { template: ` <h3> 我是logo组件 </h3> ` } // 定义一个 头部组件 const CommonHead = { template: ` <div> <h1>我是公共的头部组件</h1> <logo></logo> </div> `, components: { Logo, Logo2: { template: ` zzzz ` } // 在其他组件的components属性中注册其他子组件 } } // 挂载到全局上 Vue.component('CommonHead', CommonHead) 使用组件 <组件名></组件名> <组件名 /> 注意： 定义组件名建议使用大驼峰 使用时 改为 下划线 如组件名 CommonHead <common-head></common-head> 1，注意 组件的data属性必须是一个函数 返回一个对象（形成了闭包，形成了自己单独作用域） 为什么：组件会在 其他组件中多次挂载和使用，如果 data是一个对象，引用类型 值传递的是地址，会造成多个父组件中操作子组件的数据时 互相影响 2，组件 template中必须 有且只有一个根组件（如果使用v-if v-else-if v-else也可以同时写多个保证只显示一个） 3,template外部挂载 <script id="tpl"> <div> <h1>组件内容</h1> </div> </script> 或者 <template id="tpl"> <div> <h1>组件内容</h1> </div> </template> const CommonHead = { template:"#tpl" }