組件的基本使用

注冊組件

注冊組件就是利用Vue.component()方法，先傳入一個自定義組件的名字，然后傳入這個組件的配置。vue.component()注冊的全局組件

Vue.component('hello-world',{template: `<div>這是一個自定義組件</div>`,data () {return {message: 'hello world'}}})

組件使用

以在一個通過 new Vue 創建的 Vue 根實例中，把這個組件作為自定義元素來使用

html

<div id="app"><hello-world></hello-world> </div>var app = new Vue({ el: '#app'})

定義局部組件(局部組件只能在當前vue實例中使用)

var app = new Vue({el: '#app',data: {},components: {'my-component': {template: `<div>這是一個局部的自定義組件，只能在當前Vue實例中使用</div>`,}}})

模板的要求

注意：組件的模板只能有一個根元素。下面的情況是不允許的。

template: `<div>這是一個局部的自定義組件，只能在當前Vue實例中使用</div><button>hello</button>`,//改為 template: `<div><div>這是一個局部的自定義組件，只能在當前Vue實例中使用</div><button>hello</button></div>`,

模板可以在外面定義

<div id="app"><mycomponent></mycomponent></div><template id="mycomponent"><h1>mycomponent</h1></template><script>Vue.component('mycomponent', {template: '#mycomponent'})var app = new Vue({ el: '#app'})</script>

組件中的data必須是函數

可以看出，注冊組件時傳入的配置和創建Vue實例差不多，但也有不同，其中一個就是data屬性必須是一個函數。
這是因為如果像Vue實例那樣，傳入一個對象，由于JS中對象類型的變量實際上保存的是對象的引用，所以當存在多個這樣的組件時，會共享數據，導致一個組件中數據的改變會引起其他組件數據的改變。
而使用一個返回對象的函數，每次使用組件都會創建一個新的對象，這樣就不會出現共享數據的問題來了。

DOM模板的解析問題

當使用 DOM 作為模版時 (例如，將 el 選項掛載到一個已存在的元素上), 你會受到 HTML 的一些限制，因為 Vue只有在瀏覽器解析和標準化HTML后才能獲取模板內容。尤其像這些元素 ul，ol，table，select 限制了能被它包裹的元素，而一些像 這樣的元素只能出現在某些其它元素內部

在自定義組件中使用這些受限制的元素時會導致一些問題，例如：

<table><my-tr>...</my-tr> </table>

自定義組件 被認為是無效的內容，因此在渲染的時候會導致錯誤。這時應使用特殊的 is 屬性：

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

也就是說，標準HTML中，一些元素中只能放置特定的子元素，另一些元素只能存在于特定的父元素中。比如table中不能放置div，tr的父元素不能div等。所以，當使用自定義標簽時，標簽名還是那些標簽的名字，但是可以在標簽的is屬性中填寫自定義組件的名字。

應當注意，如果您使用來自以下來源之一的字符串模板，這些限制將不適用：

• <script type="text/x-template">
• JavaScript 內聯模版字符串
• vue 組件

轉載于:https://www.cnblogs.com/wentutu/p/10917228.html

總結

以上是生活随笔為你收集整理的vue 组件基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。