說說 Vue.js 元件

deniro發表於2018-12-07
Vue.js元件

說說 Vue.js 元件

使用 Vue.js 元件，可以提高控制元件及其 JS 能力的可複用性。

1 定義第一個元件

Vue.js 元件需要註冊後才可以使用，註冊分為全域性註冊和區域性註冊。全域性註冊後，任何 vue 例項都可以用這個元件。

html：

<div id="app">
    <deniro-component></deniro-component>
</div>
複製程式碼

js：

Vue.component('deniro-component',{
	template:'<div>亞馬遜一統美國電商天下？你想多了</div>'
});

var app = new Vue({
	el: '#app',
	data: {}
});
複製程式碼
  • component 的第一個引數是元件名稱，建議使用小寫減號的風格來命名元件。
  • 要使用這個自定義元件，必須在建立例項前先註冊這個元件。
  • template 必須是一個DOM 結構，這樣才能被正確渲染。

輸出結果：

<div id="app"><div>亞馬遜一統美國電商天下？你想多了</div></div>

2 區域性註冊

使用 Vue 例項中的 components 屬性可以區域性註冊元件，通過這種方式註冊後的元件，只有在該例項的作用域下才是有效的。

html：

<div id="app2">
    <deniro-component></deniro-component>
</div>
複製程式碼

js：

var child = {
	template: '<div>亞馬遜一統美國電商天下？你想多了</div>'
};
var app2 = new Vue({
	el: '#app2',
	components: {
		'deniro-component': child
	}
});
複製程式碼

渲染效果與上例相同。

3 擺脫 HTML 限制

元件中定義的模板，在某些情況下，是會受到 HTML 限制的。比如 <table> 內規定只允許出現 <tr>、<td> 以及 <th> 等表格元素，還有 <ul>、<ol>、<select> 等元素也有類似的限制。在這種情況下，我們可以使用 is 屬性來掛載元件。

html：

<div id="app3">
    <table>
        <tbody is="deniro-component"></tbody>
    </table>
</div>
複製程式碼

js：

Vue.component('deniro-component', {
	template: '<div>亞馬遜一統美國電商天下？你想多了</div>'
});

var app3 = new Vue({
	el: '#app3',
	data: {}
});
複製程式碼

渲染結果：

<div id="app3"><table><div>亞馬遜一統美國電商天下？你想多了</div></table></div>
複製程式碼

**注意：**這裡如果使用常規方法來使用元件，那麼模板中的內容將在 <table> 之外！

html：

<table>
	<tbody><deniro-component></deniro-component></tbody>
</table>
複製程式碼

渲染結果：

<div id="app3"><div>亞馬遜一統美國電商天下？你想多了</div><table><tbody></tbody></table></div>
複製程式碼

**注意：**如果使用的是字串模板，那麼是不受 HTML 限制的。

4 元件中的 data

Vue.js 元件中的 data 必須是函式（Vue.js 例項中的 data 是物件）。

html：

<div id="app4">
    <deniro-component4></deniro-component4>
</div>
複製程式碼

js：

Vue.component('deniro-component4', {
	template: '<div>{{content}}</div>',
	data: function () {
		return {
			content: '優信淘寶達成戰略合作，共建二手車線上交易商城'
		}
	}
});
var app4 = new Vue({
	el: '#app4'
});
複製程式碼

渲染結果：

<div id="app4"><div>優信淘寶達成戰略合作，共建二手車線上交易商城</div></div>
複製程式碼

data 定義的函式，如果 return 的是一個外部物件，而這個物件又被多個元件所引用，那麼任何一個元件修改了這個物件的值，其它元件都會受到影響。

html：

<div id="app5">
    <deniro-component5></deniro-component5>
    <deniro-component5></deniro-component5>
    <deniro-component5></deniro-component5>
</div>
複製程式碼

js：

var data = {
	counter: 0
};

Vue.component('deniro-component5', {
	template: '<button @click="counter++">{{counter}}</button>',
	data: function () {
		return data;
	}
});

var app5 = new Vue({
	el: '#app5'
});
複製程式碼

效果：

說說 Vue.js 元件

為了避免這個問題，我們必須在 data 中返回一個新的物件。

html：

<div id="app6">
    <deniro-component6></deniro-component6>
    <deniro-component6></deniro-component6>
    <deniro-component6></deniro-component6>
</div>
複製程式碼

js：

Vue.component('deniro-component6', {
	template: '<button @click="counter++">{{counter}}</button>',
	data: function () {
		return {
			counter: 0
		};
	}
});

var app6 = new Vue({
	el: '#app6'
});
複製程式碼

說說 Vue.js 元件

這樣的元件就可以複用啦O(∩_∩)O~

相關文章