vue 元件基礎知識總結
阿新 • • 發佈：2021-01-28
元件基礎
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',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',title: 'My journey with Vue',content: 'my journey...' },title: 'Blogging with Vue',content: 'my blog...' },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',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,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',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',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 元件的資料請關注我們其它相關文章！