Vue组件
如果将一个页面中所有的解决逻辑全副放在一起，解决起来就会变得非常复杂， 而且不利于后续治理以及扩大
但如果，咱们将一个页面拆分成一个个小的功能块，每个功能块实现属于本人这部分独立的性能，那么之后整个页面的治理和保护就变得容易
Vue组件化思维
组件化是Vue.js中的重要思维
- 提供里一种形象，让咱们能够开发出一个个独立可复用的小组件来结构咱们的利用
- 任何的利用都会被形象成一棵组件树
组件化思维的利用
- 有了组件化的思维，在之后开发尽可能将页面拆分成一个个小的，可复用的组件
- 这也让咱们的代码更加不便组织和治理，并且扩展性也更强
组建的应用分成三个步骤
- 创立组件结构器
- 注册组件
- 应用组件
Vue.component():
- 调用Vue.component()是将方才的组件结构器注册为一个组件，并且给它起一个组建的标签名称
- Vue.component(tagName, options)
tagName为组件名，options为配置选项
例子基于在Vue开发环境下<div id="app"> <my-cpn></my-cpn> //注册的组件</div><script> //1.创立组件结构器对象 const cpnC = Vue.extend({ template: ` <div> <h2>我是题目</h2> <p>我是内容，哈哈哈哈</p> <p>我是内容，呵呵呵呵呵</p> </div>` }) //2.注册组件 Vue.component('my-cpn', cpnC) const app = new Vue({ el: '#app', data: { } })</script>//此时组件内容就显示在页面另一种写法
<div id="app"> <my-cpn></my-cpn> </div> <script> //注册组件 Vue.component('my-cpn', { template: ` //template的DOM构造必须被一个元素蕴含，如果间接写，不带<div></div>是无奈渲染的 <div> <h2>我是题目</h2> <p>我是内容，哈哈哈哈</p> <p>我是内容，呵呵呵呵呵</p> </div>` }) var app = new Vue({ el: '#app', data: { } }) </script>//此时组件内容就显示在页面
全局组件和部分组件
全局组件：意味着能够在多个Vue实例下应用
部分组件：在实例中，应用components选项能够部分注册组件，注册后的组件只有在该实例作用于下无效
//全局组件 <div id="app"> <my-cpn></my-cpn> </div> <script> //注册组件 Vue.component('my-cpn', { template: ` <div> <h2>我是题目</h2> <p>我是内容，哈哈哈哈</p> <p>我是内容，呵呵呵呵呵</p> </div>` }) var app = new Vue({ el: '#app', data: { } }) </script> //部分组件 <div id="app"> <my-cpn></my-cpn> </div> <script> var child = { template:'<div>部分注册组件的内容</div>' } var app = new Vue({ el:'#app', components:{ 'my-cpn':child } }) </script> ####父组件和子组件的区别
如果子组件未注册而应用，则会报错，如需应用，需在Vue实例对象内再注册
<div id="app"> <cpn2></cpn2> </div> <script> //1.创立第一个组件 const cpn1 = Vue.extend({ //子组件 template: ` <div> <h2>我是题目</h2> <p>我是内容</p> </div>` }) const cpn2 = Vue.extend({ //父组件 template: ` <div> <h2>我是题目2</h2> <p>我是内容2</p> <cpn1></cpn1> </div>`, components: { cpn1: cpn1 } }) var app = new Vue({ //root组件 el: '#app', components: { cpn2: cpn2 } }) </script> ####父子组件谬误用法：以子标签的模式在Vue实例中应用- 因为当子组件注册到父组件components时，Vue会编译好父组件的模块
- 该模板的内容曾经决定了父组件将要渲染的HTML（相当于父组件中曾经有了子组件中的内容）
- <child-cpn></child-cpn>是只能在父组件中被辨认的
- 相似这种用法，<child-cpn></child-cpn>是会被浏览器疏忽的
注册组件语法糖
在之前注册组建的形式，可能有些繁琐
- Vue为了简化这个过程，提供了注册的语法糖
次要是省去了调用Vue.extend()的步骤，而是能够间接应用一个对象来代替
全局组件
原写法：调用extend
const cpnC = Vue.extend({ template: ` <div> <h2>我是源</h2> </div>` }) Vue.component('my-cpn', cpnC) const app = new Vue({ el: '#app', data: { } })语法糖：外部调用虽仍是extend，但简略
<div id="app"> <my-cpn></my-cpn> </div> <script> Vue.component('my-cpn', { template: ` <div> <h2>我是语法糖</h2> </div>` }) var app = new Vue({ el: '#app', data: { } })
部分组件
var app = new Vue({ el:'#app', data:{}, components:{ 'cpnx':{ template:` <div> <h2>我是部分组件</div> </div>` } } }) 组件模板的拆散写法
Vue提供了两种计划来定义HTML模块内容
- 应用<script>标签
- 应用<template>标签
通过script标签：留神类型必须是text/template
<div id="app"> <my-cpn></my-cpn> </div> <script typeof="text/x-template" id="my-cpn"> <div> <h2>我是题目</h2> <p>我是内容，哈哈哈哈</p> <p>我是内容，呵呵呵呵呵</p> </div> </script> <script> Vue.component('my-cpn', { template: `#my-cpn` }) const app = new Vue({ el: '#app', data: {} }) </script>template标签
<div id="app"> <my-cpn></my-cpn> </div> <template id="cpn"> <div> <h2>语法糖</h2> <p>孙悟空，哈哈哈哈</p> <p>我是语法糖呵呵呵呵呵</p> </div> </template> <script> Vue.component('my-cpn', { template: `#cpn` }) const app = new Vue({ el: '#app', data: {} }); </script>