詳解vue.js全局組件和局部組件

更新時(shí)間：2017年04月10日 14:56:35 作者：周森

這篇文章主要介紹了詳解vue.js全局組件和局部組件，實(shí)例分析了全局組件和局部的技巧，有興趣的可以了解一下。

這兩天學(xué)習(xí)了Vue.js 感覺組件這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以，今天添加一點(diǎn)小筆記。

首先Vue組件的使用有3個(gè)步驟，創(chuàng)建組件構(gòu)造器，注冊(cè)組件，使用組件3個(gè)方面。

代碼演示如下：

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <!-- 3. #app是Vue實(shí)例掛載的元素，應(yīng)該在掛載元素范圍內(nèi)使用組件-->
      <my-component></my-component>
    </div>
  </body>
  <script src="js/vue.js"></script>
  <script>
  
    // 1.創(chuàng)建一個(gè)組件構(gòu)造器
    var myComponent = Vue.extend({
      template: '<div>This is my first component!</div>'
    })
    
    // 2.注冊(cè)組件，并指定組件的標(biāo)簽，組件的HTML標(biāo)簽為<my-component>
    Vue.component('my-component', myComponent)
    
    new Vue({
      el: '#app'
    });
    
  </script>
</html>

2.理解組件的創(chuàng)建和注冊(cè)

我們用以下幾個(gè)步驟來理解組件的創(chuàng)建和注冊(cè)：

1. Vue.extend()是Vue構(gòu)造器的擴(kuò)展，調(diào)用Vue.extend()創(chuàng)建的是一個(gè)組件構(gòu)造器，而不是一個(gè)具體的組件實(shí)例。

2. Vue.extend()構(gòu)造器有一個(gè)選項(xiàng)對(duì)象，選項(xiàng)對(duì)象的template屬性用于定義組件要渲染的HTML。

3. 使用Vue.component()注冊(cè)組件時(shí)，需要提供2個(gè)參數(shù)，第1個(gè)參數(shù)時(shí)組件的標(biāo)簽，第2個(gè)參數(shù)是組件構(gòu)造器。

4. Vue.component()方法內(nèi)部會(huì)調(diào)用組件構(gòu)造器，創(chuàng)建一個(gè)組件實(shí)例。

5. 組件應(yīng)該掛載到某個(gè)Vue實(shí)例下，否則它不會(huì)生效。

請(qǐng)注意第5點(diǎn)，以下代碼在3個(gè)地方使用了<my-component>標(biāo)簽，但只有#app1和#app2下的<my-component>標(biāo)簽才起到作用。

<!DOCTYPE html>
<html>
  <body>
    <div id="app1">
      <my-component></my-component>
    </div>
    
    <div id="app2">
      <my-component></my-component>
    </div>
    
    <!--該組件不會(huì)被渲染-->
    <my-component></my-component>
  </body>
  <script src="js/vue.js"></script>
  <script>
    var myComponent = Vue.extend({
      template: '<div>This is a component!</div>'
    })
    
    Vue.component('my-component', myComponent)
    
    var app1 = new Vue({
      el: '#app1'
    });
    
    var app2 = new Vue({
      el: '#app2'
    })
  </script>
</html>

全局注冊(cè)和局部注冊(cè)

調(diào)用Vue.component()注冊(cè)組件時(shí)，組件的注冊(cè)是全局的，這意味著該組件可以在任意Vue示例下使用。

如果不需要全局注冊(cè)，或者是讓組件使用在其它組件內(nèi)，可以用選項(xiàng)對(duì)象的components屬性實(shí)現(xiàn)局部注冊(cè)。

上面的示例可以改為局部注冊(cè)的方式：

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <!-- 3. my-component只能在#app下使用-->
      <my-component></my-component>
    </div>
  </body>
  <script src="js/vue.js"></script>
  <script>
    // 1.創(chuàng)建一個(gè)組件構(gòu)造器
    var myComponent = Vue.extend({
      template: '<div>This is my first component!</div>'
    })
    
    new Vue({
      el: '#app',
      components: {
        // 2. 將myComponent組件注冊(cè)到Vue實(shí)例下
        'my-component' : myComponent
      }
    });
  </script>
</html>

由于my-component組件是注冊(cè)在#app元素對(duì)應(yīng)的Vue實(shí)例下的，所以它不能在其它Vue實(shí)例下使用。

<div id="app2">
  <!-- 不能使用my-component組件，因?yàn)閙y-component是一個(gè)局部組件，它屬于#app-->
  <my-component></my-component>
</div>

<script>
  new Vue({
    el: '#app2'
  });
</script>

如果你這樣做了，瀏覽器會(huì)提示一個(gè)錯(cuò)誤。

//注冊(cè)組件(全局 component)
Vue.component("my-component",{
  template:'<div>這是一個(gè)全局組件測試 </div>'
});
new Vue({
  el:"#app5"
})

//(局部components)

new Vue({
  el:"#app6",
  components:{
    'test-component':{
      template:"<div>這是一個(gè)局部的組件測試</div>"
    }
  }
});

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: