Vue学习笔记[08]-组件化初步

! 由于html标签中不区分大小写,因此组件的名称应是短横线命名.
在使用CLI后组件命名因为首字母大写命名

创建组件的三个步骤(老式方法)

• 全局组件

  • 创建组件构造器
    使用Vue提供的Vue.extend()方法创建一个组件构造器,传入template代表自定义组件模板.

     const cpnC = Vue.extend({//cpnConstructor
      template:`<li>abc</li>`
    });
  

  当组件的父元素为全局对象(window)时,需要用一个标签将内容包裹起来.
  (✖)------------|(✔)-----------------
  <li>abc</li>|<div>
  <li>abc</li>|  <li>abc</li>
  <li>abc</li> | <li>abc</li>
  <li>abc</li> | <li>abc</li>
  　　　　　|</div>

  • 注册组件
    调用Vue.component()方法将组件构造器注册为组件.

  Vue.component('my-cpn',cpnC);
  //参数1:组件名称(在html的vue管理的标签中使用),参数2:组件构造器
  

  • 使用组件
    在Vue砬实例内使用注册的组件。

  <div id="app">
    <my-cpn></my-cpn>
  </div>    
  ---------------------------------
   const vm = new Vue({
  el:"#app"
  })
  

• 局部组件

  将组件注册的部分移动到vue实例中

    const vm = new Vue({
    el: "#app",
    data: {
    },
    components:{
      "my-cpn" :cpnC
    }
  })
  

父子组件

在父组件中可以注册子组件:

//子组件构造器 *由于ES6语法特性const和let无法声明提前 因此子组件构造器需要放在父组件构造器声明之前
//即使使用var来声明和赋值,JavaScript仅仅只会提升声明并不会提升赋值.
  const cpnChildC = Vue.extend({
    template: "<h4>i\'m child</h4>"
  })
//父组件构造器
  const cpnFatherC = Vue.extend({
    template: `
       <div>
        <li>i\'m father</li>
        <cpnChild></cpnChild>
       </div>
      `,
    components: {//在父组件中注册子组件(子组件名:子组件构造器)
      cpnChild: cpnChildC
    }
  });
  Vue.component('my-cpn', cpnFatherC);

  const vm = new Vue({//可以视为根组件: ROOT
    el: "#app",
    data: {},
//局部注册
    // components:{
    //   "my-cpn" :cpnFatherC
    // }
  })

子组件无法直接在脱离父组件的作用域外使用,就像是所有组件无法在vue挂载的html元素外部使用.

新式写法语法糖(官方推荐)

• 全局

  Vue.component('cpn',{
   template:`<li>abc</li>`
  })
  

• 局部

  const vm = new Vue({
    el: "#app",
    data: {},
    components: {
      "my-cpn": {
        template: `<li>abc</li>`
      },
    }
  })
  

  • 抽离template
    可以将组件的模板抽离到<template>中,并在Vue.component()中使用

  <template id="cpn-t">
    <li>abc</li>
  </template>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('cpn', {
      template: "#cpn-t"
    })
    const vm = new Vue({
      el: "#app",
    })
  </script>