组件基础 · 要努力

#### <font color=red /> 1，组件思想它提供了一种抽象，开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树尽可能的将页面拆分成一个个小的、可复用的组件。方便组织和管理，并且扩展性也更强 #### <font color=red /> 2，注册组件的基本步骤组件的使用三个步骤： 1，创建组件构造器； Vue.extend()： 2，注册组件； Vue.component('my-cpn', cpnC) 3，使用组件。组件必须挂载在某个Vue实例下，否则它不会生效 ```javascript <div id="app">  <my-cpn></my-cpn> <div> <div> <my-cpn></my-cpn> </div> </div> </div> <my-cpn></my-cpn> // 组件必须挂载在某个Vue实例下，否则它不会生效 <script src="../js/vue.js"></script> <script> const cpnC = Vue.extend({ // 1.创建组件构造器对象 template: ` <div> <h2>我是标题</h2> </div>` }) Vue.component('my-cpn', cpnC) // 2.注册组件 const app = new Vue({ el: '#app', data: { message: '你好啊'} }) </script> </body> ``` #### <font color=red /> 3，组件补充 - **1，全局组件和局部组件** 调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。如果 ```javascript const app = new Vue({ el: '#app', data: { message: '你好啊' }, components: { //注册的组件是挂载在某个实例中, 局部组件 cpn: cpnC // cpn使用组件时的标签名 } }) ``` - **2，父组件和子组件** ```javascript <body> <div id="app"> <cpn2></cpn2>  </div> <script src="../js/vue.js"></script> <script> const cpnC1 = Vue.extend({ // 1.创建第一个组件构造器(子组件) template: ` <div> <h2>我是标题1</h2> </div> ` }) const cpnC2 = Vue.extend({ // 2.创建第二个组件构造器(父组件) template: ` <div> <h2>我是标题2</h2> <cpn1></cpn1> </div> `, components: { cpn1: cpnC1 } }) const app = new Vue({ // root组件 el: '#app', data: { message: '你好啊' }, components: { cpn2: cpnC2 } }) </script> </body> ``` - **3，注册组件语法糖** 省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替 ```javascript // 创建并注册局部组件的语法糖 const app = new Vue({ el: '#app', data: { message: '你好啊' }, components: { 'cpn2': { template: ` <div> <h2>我是标题2</h2> </div> ` } } }) ``` - **4，模板的分离写法** ```javascript <template id="cpn"> <div> <h2>我是标题</h2></div> </template> // <script>中注册一个全局组件 Vue.component('cpn', { template: '#cpn' }) ```