91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2020-08-26 22:06:09 來源:腳本之家 閱讀:117 作者:周森 欄目:web開發

這兩天學習了Vue.js 感覺組件這個地方知識點挺多的,而且很重要,所以,今天添加一點小筆記。

首先Vue組件的使用有3個步驟,創建組件構造器,注冊組件,使用組件3個方面。

代碼演示如下:

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

2.理解組件的創建和注冊

我們用以下幾個步驟來理解組件的創建和注冊:

1. Vue.extend()是Vue構造器的擴展,調用Vue.extend()創建的是一個組件構造器,而不是一個具體的組件實例。

2. Vue.extend()構造器有一個選項對象,選項對象的template屬性用于定義組件要渲染的HTML。

3. 使用Vue.component()注冊組件時,需要提供2個參數,第1個參數時組件的標簽,第2個參數是組件構造器。

4. Vue.component()方法內部會調用組件構造器,創建一個組件實例。

5. 組件應該掛載到某個Vue實例下,否則它不會生效。

請注意第5點,以下代碼在3個地方使用了<my-component>標簽,但只有#app1和#app2下的<my-component>標簽才起到作用。

<!DOCTYPE html>
<html>
  <body>
    <div id="app1">
      <my-component></my-component>
    </div>
    
    <div id="app2">
      <my-component></my-component>
    </div>
    
    <!--該組件不會被渲染-->
    <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>

全局注冊和局部注冊

調用Vue.component()注冊組件時,組件的注冊是全局的,這意味著該組件可以在任意Vue示例下使用。

如果不需要全局注冊,或者是讓組件使用在其它組件內,可以用選項對象的components屬性實現局部注冊。

上面的示例可以改為局部注冊的方式:

<!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.創建一個組件構造器
    var myComponent = Vue.extend({
      template: '<div>This is my first component!</div>'
    })
    
    new Vue({
      el: '#app',
      components: {
        // 2. 將myComponent組件注冊到Vue實例下
        'my-component' : myComponent
      }
    });
  </script>
</html>

由于my-component組件是注冊在#app元素對應的Vue實例下的,所以它不能在其它Vue實例下使用。

<div id="app2">
  <!-- 不能使用my-component組件,因為my-component是一個局部組件,它屬于#app-->
  <my-component></my-component>
</div>

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

如果你這樣做了,瀏覽器會提示一個錯誤。

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

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

//(局部components)

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

宝坻区| 崇明县| 渝中区| 达日县| 鄂伦春自治旗| 玉溪市| 巴楚县| 禄劝| 武安市| 慈溪市| 虹口区| 彩票| 江口县| 河源市| 寿光市| 星子县| 鄂温| 镇平县| 丰原市| 万州区| 阜城县| 南部县| 收藏| 阿城市| 鹤山市| 普洱| 专栏| 南和县| 平乡县| 土默特左旗| 广东省| 毕节市| 宁远县| 阜宁县| 龙南县| 泰兴市| 晋城| 根河市| 昭苏县| 丁青县| 晋江市|