Vue的组件

Vue的组件

前言

Vue 是构造器函数
Vue.extend() 是 vue用来扩展 vue功能（ 组件 ）的
Vue决定不进行实例化Vue.extend(),vue借鉴了react,react中组件是以标签的形式使用的，vue 决定组件要以标签的形式呈现
为了符合 html / html5的规则，所以组件的标签化使用必须注册，
注册说白了就是用来解析这个标签化的组件未html能识别的标签
组件使用前必须进行注册 --------> 非常重要

全局注册：

Vue.component( 组件的名称，组件的配置项 )
Vue.extend()--------->options
Vue --------------------->options
这两个options基本一致
组件必须先注册在使用（ 实例（组件） 范围内使用 ）

<div id="app">
    <Father></Father>
 </div>
  
 <div id="root">
    <Father></Father>
 </div>

// console.log( Vue )
// console.log( Vue.extend() )

  var Hello = Vue.extend({
    template: '<div> 这里是father组件 </div>'
  })             //VueComponent( option )

  Vue.component( 'Father', Hello )//全局注册

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

  new Vue({
    el: '#root'
  })

局部注册：

在组件中用一个components的配置项目来表示
只能在注册的范围内使用，其他地方是不能使用的

<div id="app">
    <Father></Father>
 </div>
  
 <div id="root">
    <Father></Father>
 </div>

var Hello = Vue.extend({
    template: '<div> hello,你好 </div>'
  })

  new Vue({
    el: '#app',
    components: {
      // key: value  key是组件名称   value是组件配置项
      // 'Father': Hello,
      'Father': Hello//局部注册
    }
  })

  new Vue({
    el: '#root'
  })

组件注册简写：

<div id="app">
        <Father></Father>
        <Son></Son>
</div>

Vue.component('Father',{
    template: '<div> 这里是全局注册 </div>'
  })

  new Vue({
    el: '#app',
    components: {
      'GabrielYan': {
        template: '<div> 这里是局部注册 </div>'
      }
    }
  })

组件的嵌套：

父组件里面放子组件 ===》 类似于dom结构的父子级结构
将子组件以标签的形式放在父组件的模板中使用
切记，不要放在父组件的内容中

<div id="app">
        <!-- 下面的正确的写法 -->
        <Father></Father>

        <!-- 下面的错误的写法 -->
        <Father>
            <Son></Son>
        </Father>
</div>

Vue.component('Father',{
        template: '<div> Father<Son></Son> </div>'//Father组件注册,将Son组件以标签的形式在Father组件的模板中使用
    })

    Vue.component('Son',{
        template: '<div> Son </div>'//Son组件注册
    })

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

组件不仅可以用双标签表示，也可以使用单标签表示

new Vue({
    el: '#app',
    components: {
      'Father': {
        template: '<div> father组件 <Son /></div>',
        components: {
          'Son': {
            template: '<div> son组件 </div>'
          }
        }
      }
    }
  })

is规则

ul>li ol>li table>tr>td select>option
如上直属父子级如果直接组件以标签化形式使用，那么就会出现bug
解决： 使用is规则: 通过is属性来绑定一个组件
例如：table

<tr is = "Hello"></tr>

<div id="app">
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr is = "Hello"></tr>
    </table>
  </div>

Vue.component('Hello',{
    template: '<tr> <td> 4 </td> <td> 5 </td><td> 6 </td> </tr>'
  })

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

template使用：

1. 实例范围内使用
template中的内容被当做一个整体了，并且template标签是不会解析到html结构中的
2. 实例范围外使用
实例范围外template标签是不会被直接解析的

组件要想使用template使用，我们采用第二种
但是使用第二种template使用后，有个弊端，template标签结构会在html文件中显示
解决： 使用webpack、gulp等工具编译，将来要用vue提供的单文件组件

<div id="app">//实例
    <h3> 实例范围内使用 </h3>
    <template>
      <div>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </template>

    <h3> 使用 hello  组件</h3>

    <Hello></Hello>
  </div>
  
  <h3> 实例范围外使用 </h3>
  <template id="hello">
    <div>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </template>

Vue.component('Hello',{
    template: '#hello'
  })

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

组件使用的时候别忘了注册哦 >_0