怎么在vue中使用component組件？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

創新互聯公司專注于北關企業網站建設,響應式網站建設,商城網站定制開發。北關網站建設公司,為北關等地區提供建站服務。全流程定制開發，專業設計，全程項目跟蹤，創新互聯公司專業和態度為您提供的服務

組件component的注冊

全局組件:

Vue.component('todo-item',{
  props:['grocery'],
  template:'<li>{{grocery.text}}</li>'
})
var app7 = new Vue({
  el:"#app7",
  data:{
    groceryList:[
      {"id":0,"text":"蔬菜"},
      {"id":1,"text":"奶酪"},
      {"id":2,"text":"其他"}
    ]
  }
})

<div id="app7">
  <ol>
    <todo-item
      v-for="grocery in groceryList"
      v-bind:grocery="grocery"
      v-bind:key="grocery.id">
    </todo-item>
  </ol>
</div>

局部注冊：

var Child = {
 template: '<div>A custom component!</div>'
}
new Vue({
 // ...
 components: {
  // <my-component> 將只在父模板可用
  'my-component': Child
 }
})

DOM模板解析說明

組件在某些HTML標簽下會受到一些限制。
比如一下代碼，在table標簽下，組件是無效的。

<table>
 <my-row>...</my-row>
</table>

解決方法是，通過is屬性使用組件

<table>
 <tr is="my-row"></tr>
</table>

應當注意，如果您使用來自以下來源之一的字符串模板，將不會受限

<script type="text/x-template">

JavaScript 內聯模版字符串

.vue 組件

data使用函數，避免多組件互相影響

html

<div id="example-2">
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
</div>

js

var data = { counter: 0 }
Vue.component('simple-counter', {
 template: '<button v-on:click="counter += 1">{{ counter }}</button>',
 data: function () {
  return data
 }
})
new Vue({
 el: '#example-2'
})

如上，div下有三個組件，每個組件共享一個counter。當任意一個組件被點擊，所有組件的counter都會加一。

解決辦法如下

js

Vue.component('simple-counter', {
 template: '<button v-on:click="counter += 1">{{ counter }}</button>',
 data: function () {
  return {counter:0}
 }
})
new Vue({
 el: '#example-2'
})

關于怎么在vue中使用component組件問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創新互聯行業資訊頻道了解更多相關知識。

當前名稱：怎么在vue中使用component組件
當前URL：http://m.newbst.com/article8/jegdop.html

成都網站建設公司_創新互聯，為您提供品牌網站設計、建站公司、網站導航、外貿網站建設、企業建站、靜態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯