vue 組件基礎知識總結
組件基礎
1 組件的復用
組件是可復用的Vue實例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script>
// 定義一個名為 button-counter 的新組件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">點擊瞭 {{ count }} 次.</button>'
});
new Vue({ el: '#app' });
</script>
</body>
</html>
註意當點擊按鈕時，每個組件都會各自獨立維護它的count。這裡自定義組件的data屬性必須是一個函數，每個實例維護一份被返回對象的獨立的拷貝。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script>
var buttonCounterData = {
count: 0
}
// 定義一個名為 button-counter 的新組件
Vue.component('button-counter', {
data: function () {
return buttonCounterData
},
template: '<button v-on:click="count++">點擊瞭 {{ count }} 次.</button>'
});
new Vue({ el: '#app' });
</script>
</body>
</html>
2 通過 Prop 向子組件傳遞數據
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
</div>
<script>
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
new Vue({ el: '#app' });
</script>
</body>
</html>
這裡<blog-post>組件就是通過自定義屬性title來傳遞數據。
我們可以使用v-bind來動態傳遞prop。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
</div>
<script>
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
new Vue({
el: '#app',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
});
</script>
</body>
</html>
3 單個根元素
每個組件必須隻有一個根元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
</div>
<script>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
new Vue({
el: '#app',
data: {
posts: [
{ id: 1, title: 'My journey with Vue', content: 'my journey...' },
{ id: 2, title: 'Blogging with Vue', content: 'my blog...' },
{ id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
]
}
});
</script>
</body>
</html>
註意到v-bind:post=”post”綁定的post是一個對象，這樣可以避免瞭需要通過很多prop傳遞數據的麻煩。
4 監聽子組件事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div :style="{fontSize: postFontSize + 'em'}">
<blog-post v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
v-on:enlarge-text="postFontSize += 0.1" />
</div>
</div>
<script>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<button v-on:click="$emit('enlarge-text')">放大字體</button>
<div v-html="post.content"></div>
</div>
`
})
new Vue({
el: '#app',
data: {
postFontSize: 1,
posts: [
{ id: 1, title: 'My journey with Vue', content: 'my journey...' },
{ id: 2, title: 'Blogging with Vue', content: 'my blog...' },
{ id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
]
}
});
</script>
</body>
</html>
子組件通過$emit方法並傳入事件名稱來觸發一個事件。父組件可以接收該事件。
我們可以使用事件拋出一個值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div :style="{fontSize: postFontSize + 'em'}">
<blog-post v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
v-on:enlarge-text="postFontSize += $event" />
</div>
</div>
<script>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<button v-on:click="$emit('enlarge-text', 0.2)">放大字體</button>
<div v-html="post.content"></div>
</div>
`
})
new Vue({
el: '#app',
data: {
postFontSize: 1,
posts: [
{ id: 1, title: 'My journey with Vue', content: 'my journey...' },
{ id: 2, title: 'Blogging with Vue', content: 'my blog...' },
{ id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
]
}
});
</script>
</body>
</html>
在父組件中，我們可以通過$event訪問到被拋出的這個值。
我們可以在組件上使用v-model。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- <input v-model="searchText"> -->
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">
<p>{{ searchText }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
searchText: ''
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<custom-input v-model="searchText"></custom-input>
<custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>
<p>{{ searchText }}</p>
</div>
<script>
Vue.component('custom-input', {
props: ['value'],
template: `<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" >`
})
new Vue({
el: '#app',
data: {
searchText: ''
}
});
</script>
</body>
</html>
最後，註意解析 DOM 模板時的註意事項。
以上就是vue 組件基礎知識總結的詳細內容，更多關於vue 組件的資料請關註WalkonNet其它相關文章！