vue 組件基礎(chǔ)知識總結(jié)
更新時間：2021年01月26日 12:01:37 作者：gzhjj
這篇文章主要介紹了vue 組件基礎(chǔ)知識的相關(guān)資料，幫助大家更好的理解和使用vue的組件，感興趣的朋友可以了解下
組件基礎(chǔ)
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屬性必須是一個函數(shù)，每個實例維護一份被返回對象的獨立的拷貝。
<!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 向子組件傳遞數(shù)據(jù)
<!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來傳遞數(shù)據(jù)。
我們可以使用v-bind來動態(tài)傳遞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傳遞數(shù)據(jù)的麻煩。
4 監(jiān)聽子組件事件
<!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方法并傳入事件名稱來觸發(fā)一個事件。父組件可以接收該事件。
我們可以使用事件拋出一個值。
<!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 組件基礎(chǔ)知識總結(jié)的詳細內(nèi)容，更多關(guān)于vue 組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
最近接了個小活,其中甲方要求把vue項目打包成exe安裝在windows上,其中有也會出現(xiàn)一些小問題和優(yōu)化,特此記錄,這篇文章主要給大家介紹了關(guān)于將vue項目打包成電腦端應用.exe的完整步驟,需要的朋友可以參考下2023-10-10
這篇文章主要給大家介紹了關(guān)于如何基于Vue3封裝一個好用的Websocket的相關(guān)資料,在Vue3中我們可以將Websocket類封裝成一個Vue插件,以便全局使用,需要的朋友可以參考下2023-09-09
.sync?修飾符所提供的功能,當一個子組件改變了一個prop的值時,這個變化也會同步到父組件中所綁定,下面這篇文章主要給大家介紹了關(guān)于Vue中子組件向父組件傳值以及.sync修飾符的相關(guān)資料,需要的朋友可以參考下2022-11-11
使用Vue實現(xiàn)網(wǎng)站SEO優(yōu)化的方法示例
在如今這個數(shù)字化和信息化的時代,搜索引擎優(yōu)化（SEO）已經(jīng)成為網(wǎng)站成功的關(guān)鍵因素之一,在使用現(xiàn)代化框架如Vue.js進行開發(fā)時,開發(fā)者通常關(guān)注的是構(gòu)建高效的單頁面應用,本文將介紹如何使用Vue來優(yōu)化網(wǎng)站的SEO,并提供一些示例代碼幫助您實現(xiàn)這些優(yōu)化2024-11-11
這篇文章主要介紹了Vue.delete()刪除對象的屬性說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue cli4環(huán)境變量和模式示例詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
防抖節(jié)流是可以說是一種優(yōu)化組件性能的技巧,可以有效減少組件中的渲染次數(shù)和計算量,本文主要介紹了Vue3項目中使用防抖節(jié)流的實現(xiàn)示例,感興趣的可以了解一下2024-04-04
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue實現(xiàn)圖片加載完成前的loading組件方法
下面小編就為大家分享一篇vue實現(xiàn)圖片加載完成前的loading組件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue插件--仿微信小程序showModel實現(xiàn)模態(tài)提示窗功能
這篇文章主要介紹了vue插件--仿微信小程序showModel實現(xiàn)模態(tài)提示窗,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08