vue的组件初始化、局部组件与全局组件

组件：一个带名字的可复用的vue实例，继承自实例，实例有的组件都会有，只是会有部分变化。

1、组件的创建

　　通过Vue.extend创建一个组件，template是字符模板

let xixi = Vue.extend({ template: '<h1>你好世界</h1>'})

2、组件的注册

　　通过Vue.component("组件名"，创建的组件)来注册创建的组件

Vue.component("MyComponent",xixi)

3、组件的使用

<mycomponent></mycomponent>

注意：使用时必须放在被vue实例所关联的标签的内部，使用组件名时，注意驼峰命名和连接线命名的切换，因为组件在使用时不允许驼峰命名法的形式使用，组件的使用也可以使用单标签的形式，比如：

<div id="app">
    {{ test }}
    <mycomponent></mycomponent>
    <mycomponent></mycomponent>
　　<mycomponent/>//单标签使用
    <!-- <MyComponent></MyComponent> -->//会报错
  </div>


<script>
  //  将组件的创建和注册合并 简写
  // Vue.component('MyComponent',{
  //   template:'<h1>你好世界</h1>'
  // })
  //  使用组件名注意驼峰命名和连接线命名的切换
  Vue.component('my-component',{
    template:'<h1><p>你好世界</p></h1>'
  })
    new Vue({ 
      data: {
        test: 'test',
      }
    }).$mount('#app')
  </script>

 

4、组件

<div id="app">
    {{ test }}
    <my-component></my-component>
    <my-component></my-component>
  </div>

  <template id="tp1">
    <div>
      这里是组件模板23424
      <img src="" alt="">
      <ul>
        <li>1231</li>
      </ul>
      <div>年龄{{ age }}</div>
      <button @click="add"> add </button>
    </div>
 
  </template>
  <script>
    // template 类似于 实例中 el 将组件和一个template模板绑定
    // 只能有一个根元素
    // 组件中data是一个fun 内部返回一个对象
    // 组件中的template 和 实例中的el类似
    Vue.component('MyComponent',{
      template: '#tp1',
      data() {
        return {
          age:16
        }
      },
      methods: {
        add() {
          console.log(this)
          this.age = this.age + 1
        }
      }
    })

    new Vue({ 
      el: '#app',
      data: {
        test: 'test',
      }
    })
  </script>

5、全局组件

（1）通过Vue.component注册的组件是全局组件

（2）通过实例内部的components注册的组件是局部组件

（3）在注册过后的全局组件，后面所有的实例都可以访问

  <div id="app1">
    1
    <my-test></my-test>
  </div>
<hr>
  <div id="app2">
    2
    <my-test></my-test>
  </div>
<hr>
  <div id="app3">
    3
    <my-test></my-test>
  </div>



<script>
 
    new Vue({}).$mount('#app1')//无法访问下面的组件

    Vue.component('MyTest',{ template: "<h1>测试组件</h1>"})
    Vue.component('MyTest',{ template: "<h1>测试组件222</h1>"})
    new Vue({}).$mount('#app2')
    new Vue({}).$mount('#app3')
  </script>

6、局部组件

（1）局部组件通过实例或者组件内部的components进行注册

（2）只能在注册的实例或者组件当中使用，别的地方无法使用

<div id="app1">
    11
    <my-test/>
  </div>

  <div id="app2">
    //<my-test/>
    22
  </div>

  <script>
    new Vue({
      components: {
        'MyTest': {
          template: '<h1>测试组件</h1>'
        },
        // 'MyTest': {
        //   template: '<h1>测试组件11</h1>'
        // }
      }
    }).$mount('#app1')

    new Vue({}).$mount('#app2')//app2无法使用组件
  </script>

7、组件的嵌套

（1）全局组件本身没有层级之分，根据用户的使用情况来划分子父组件或者兄弟组件

<div id="app1">
    <parent>

    </parent>
    <son></son>
  </div>

  <template id="parent">
    <div>
      这里是父组件
    </div>
  </template>

  <template id="son">
    <div>
      这里是子组件
      <!-- <parent></parent> -->
    </div>
  </template>

  <script>
    // 组件标签内部的内容会被忽略，除非使用插槽slot
    Vue.component('parent', { template: "#parent" })
    Vue.component('son', { template: "#son" })
    new Vue({}).$mount('#app1')


  </script>

（2）局部组件的嵌套

　　（1）局部组件在注册完成就已经确定了嵌套关系，只能按照嵌套关系来使用

<div id="app1">
    <parent></parent>
    
  </div>

  <template id="parent">
    <div>
      这里是父组件
      <son></son>
    </div>
  </template>

  <template id="son">
    <div>
      这里是子组件
    </div>
  </template>

  <script>
    new Vue({
      components: {
        parent: {
          template: '#parent',
          components: {
            son: {
              template: '#son',
            }
          }
        },
        // son: {
        //   template: '#son'
        // }
      }
    }).$mount('#app1')


  </script>