Vue之组件化基础

什么是组件化

1. 组件化是当今最为流行的一种可复用性增加的方法，随着当今前端开发的复杂度更加，这个组件化变得越来越流行

组件的基础

1. 组件是一个具备html css img js …等的一个聚合体
2. 组件的表现形式就类似一个标签
3. 组件至少得有模板

vue的组件化

1. Vue.js通过Vue.extend() 方法来扩展 组件的 使用
2. Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的
3. new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，我们称之为 ‘根实例组件’ ，叫 ‘Root’ 组件
4. Vue中组件的表现形式是类似于标签的，要想像标签一样使用，就必须得符合 h5 的规则，也就是必须要进行组件的注册
5. 组件的注册有两种形式
   全局注册
   局部注册
6. 组件必须先注册在使用
7. 组件中的模板需要使用一个叫做template的配置项表示

全局注册

<div id="#app">
    <hello>hello>
    <hello>hello>
div>

 //1. 组件的配置项
 const Hello = Vue.extend({
   template: '
 Hello component!!! 
'
 })
 // 2. 组件的注册
 
 Vue.component( 'Hello', Hello )
 
 // 3. 组件的使用
 new Vue({
   el: '#app'
 })

运行结果:

全局注册的简写

• 组件的配置项可以简写，不需要使用 Vue.extend(options),可以直接将options写在组件的注册中

 ```html
<div id="#app">
     <hello>hello>
     <hello>hello>
div>
  ```html
<div id="#app1">
     <hello>hello>
     <hello>hello>
div>
 

Vue.component("Hello",{
    template:'
Hello component!!!
'
})

new Vue({
     el:"#app"
 })
 new Vue({
	 el:"#app1"
 })

• 全局注册，也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如上面代码中app和app1模板中都可使用该Hello组件

局部注册

<div id="#app">
    <hello>hello>
div>
 ```html
<div id="#app1">
    <hello>hello>
div>

new Vue({
            el: "#app",
            components: {
                'Hello': {
                    template: '
Hello component!!!
'
                }
            }
        })

上面代码在app模板中注册，在app1模板中无法使用，所以代码运行结果只有一行“Hello component!!!”

这时我们发现，template里的代码这样写并不方便。可读性也不好。但是好在vue提供了一种更好的写法：

<div id="app">
    <Hello>Hello>
  div>
  <template id="hello">
    <div>
      <h3> Hello component!!! h3>
    div>
  template>

 new Vue({
    el: '#app',
    components: {
      'Hello': {
        template: '#hello'
      }
    }
  })

注意

template组件中有且仅有一个根元素

 <template id="hello">

      <div>
        <h3> hello  h3>
      div>
      <div>
        <h3> hello  h3>
      div>
 
  template>

上面这种写法会报错，因为template组件里有两个根元素，正确的写法应该在两个div盒子外面再套一层div

  <template id="hello">
    <div>
      <div>
        <h3> helloh3>
      div>
      <div>
        <h3> helloh3>
      div>
    div>
  template>

还有一个要注意的地方

  比如特殊的一些标签： ul li      ol li      table tr td   dl dt dd select option ...这类型标签，是规定了它们的直接子元素，当我们将组件写入这类型标签的时候，就会发现有问题
解决： 在直接子元素身上，通过 is 属性来 绑定  一个组件

<div id="app">
    <table>
        <tr>
          <td>1td>
          <td>2td>
          <td>3td>
        tr>
        
        tr>
      table>
  div>
  <template id="hello">
    <tr>
      <td>1td>
      <td>2td>
      <td>3td>
    tr>
  template>

//js
 new Vue({
    el: '#app',
    components: {
      'Hello': {
        template: '#hello'
      }
    }
  })

组件的嵌套

全局组件的嵌套

 <div id="app">
    <Father>Father>
  div>
  <template id="father">
    <div>
      <h3>  father h3>
      <hr>
      <Son>Son>
    div>
  template>
  <template id="son">
    <h3> son h3>
  template>

  Vue.component('Father',{
    template: '#father'
  })
  Vue.component('Son',{
    template: '#son'
  })

  new Vue({
    el: '#app',
  })

局部组件的嵌套*

 <div id="app">
    <Father>Father>
  div>
  <template id="father">
    <div>
      <h3>  father h3>
      <hr>
      <Son>Son>
    div>
  template>
  <template id="son">
    <h3> son h3>
  template>

  new Vue({
    el: '#app',
    components: {
      'Father': {
        template: '#father',
        components: {
          'Son': {
            template: '#son'
          }
        }
      }
    }
  })