vue 組件基礎知識總結
更新時間：2021年01月26日 12:01:37 作者：gzhjj
這篇文章主要介紹了vue 組件基礎知識的相關資料，幫助大家更好的理解和使用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來動態(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傳遞數據的麻煩。
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 組件基礎知識總結的詳細內容，更多關于vue 組件的資料請關注腳本之家其它相關文章！
相關文章
在Vue3中,我們經常會遇到需要處理列表渲染的情況,Vue3引入了一種新的語法,即#default=“scope”,本文就來介紹一下Vue3中#default=“scope”的使用,感興趣的可以了解一下2023-10-10
區(qū)分vue-router的hash和history模式
這篇文章主要介紹了區(qū)分vue-router的hash和history模式，幫助大家更好的理解和學習vue路由，感興趣的朋友可以了解下2020-10-10
公共Hooks封裝文件下載useDownloadFile實例詳解
這篇文章主要為大家介紹了公共Hooks封裝文件下載useDownloadFile實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家詳細介紹了vue購物車插件的編寫代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼
這篇文章主要介紹了Vue+jquery實現(xiàn)表格指定列的文字收縮的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家介紹了vue開發(fā)設計分支切換與cleanup實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要給大家介紹了關于Vue動態(tài)樣式幾種常用方法總結的相關資料,在我們的前端界面中,很多的地方的樣式都是不確定的狀態(tài),要根據其他內容的變化而變化樣式的,需要的朋友可以參考下2023-08-08
element編輯表單el-radio回顯之后無法選擇的問題解決
今天主要來談一下element-ui編輯表單中的el-radio回顯之后無法選擇的問題，主要涉及到vue的雙向綁定，以及element-ui編輯表單中的el-radio的默認類型，感興趣的可以了解一下2021-08-08
這篇文章主要給大家介紹了關于如何利用vue實現(xiàn)波譜擬合的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
Vue.set()和this.$set()這兩個api的實現(xiàn)原理基本一模一樣,都是使用了set函數,下面這篇文章主要給大家介紹了關于Vue.set與this.$set的用法與使用場景,需要的朋友可以參考下2022-03-03