vue建立元件的幾種方式是什麼

方式：1、利用「Vue.extend」建立全域性的vue元件，語法為'Vue.component('元件名',建立出來的元件模板物件)；2、利用「Vue.component」建立元件；3、利用template元素，定義元件的HTML模板結構。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

vue建立元件的幾種方式是什麼

1、使用 Vue.extend 來建立全域性的Vue元件

<div id="app">
    <!-- 如果要使用元件，直接，把元件的名稱，以 HTML 標籤的形式，引入到頁面中，即可 -->
    <mycom1></mycom1>
  </div>
  <script>
    // 1.1 使用 Vue.extend 來建立全域性的Vue元件
    // var com1 = Vue.extend({
    //   template: '<h3>這是使用 Vue.extend 建立的元件</h3>' // 通過 template 屬性，指定了元件要展示的HTML結構
    // })
    // 1.2 使用 Vue.component('元件的名稱', 建立出來的元件模板物件)
    // Vue.component('myCom1', com1)
    // 如果使用 Vue.component 定義全域性元件的時候，元件名稱使用了 駝峰命名，則在參照元件的時候，需要把 大寫的駝峰改為小寫的字母，同時，兩個單詞之前，使用 - 連結；
    // 如果不使用駝峰,則直接拿名稱來使用即可;
    // Vue.component('mycom1', com1)
    // Vue.component 第一個引數:元件的名稱,將來在參照元件的時候,就是一個 標籤形式 來引入 它的
    // 第二個引數: Vue.extend 建立的元件  ,其中 template 就是元件將來要展示的HTML內容
    Vue.component('mycom1', Vue.extend({
      template: '<h3>這是使用 Vue.extend 建立的元件</h3>'
    }))
    // 建立 Vue 範例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>

2、直接使用 Vue.component 建立

  <div id="app">
    <!-- 還是使用 標籤形式,引入自己的元件 -->
    <mycom2></mycom2>
  </div>
  <script>
    // 注意:不論是哪種方式建立出來的元件,元件的 template 屬性指向的模板內容,必須有且只能有唯一的一個根元素
    Vue.component('mycom2', {
      template: '<div><h3>這是直接使用 Vue.component 建立出來的元件</h3><span>123</span></div>'
    })
    // 建立 Vue 範例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>

3、 在被控制的 #app 外面,使用 template 元素,定義元件的HTML模板結構

<div id="app">
    <mycom3></mycom3>
    <!-- <login></login> -->
  </div>
  <div id="app2">
    <mycom3></mycom3>
    <login></login>
  </div>
  <!-- 在被控制的 #app 外面,使用 template 元素,定義元件的HTML模板結構  -->
  <template id="tmpl">
    <div>
      <h1>這是通過 template 元素,在外部定義的元件結構,這個方式,有程式碼的只能提示和高亮</h1>
      <h4>好用,不錯!</h4>
    </div>
  </template>
  <template id="tmpl2">
    <h1>這是私有的 login 元件</h1>
  </template>
  <script>
    Vue.component('mycom3', {
      template: '#tmpl'
    })
    // 建立 Vue 範例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
    var vm2 = new Vue({
      el: '#app2',
      data: {},
      methods: {},
      filters: {},
      directives: {},
      components: { // 定義範例內部私有元件的
        login: {
          template: '#tmpl2'
        }
      },
    })
  </script>

【相關推薦：《》】

以上就是vue建立元件的幾種方式是什麼的詳細內容，更多請關注TW511.COM其它相關文章！