一篇文章帶你了解Vue組件的創(chuàng)建和使用
一、什么是組件？
組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。
二、創(chuàng)建全局組件
方式一
1、Vue.extend
var com1 = Vue.extend({
// 通過 template 屬性，指定了組件要展示的HTML結(jié)構(gòu)
template: '<h3>這是使用 Vue.extend 創(chuàng)建的組件</h3>'
})
2、Vue.component
Vue.component(‘組件的名稱', 創(chuàng)建出來的組件模板對象) 注冊組件
Vue.component('myCom1', com1)
注意：如果使用Vue.Component 注冊全局組件的時候，組件的名稱使用了駝峰命名，則在引用組件的時候需要把大寫的駝峰改為小寫的字母，同時，兩個單詞之前，使用 “–” 鏈接。如果不使用則直接拿名稱來使用即可。
方式二
直接使用Vue.component
Vue.component('mycom2', {
template: '<div><h3>這是直接使用 Vue.component 創(chuàng)建出來的組件</h3>
<span>123</span></div>'
})
示例：
方式三
1、被控制的 #app 外面,使用 template 元素,定義組件的HTML模板結(jié)構(gòu)。
<template id="tmpl">
<div>
<h1>這是通過 template 元素,在外部定義的組件結(jié)構(gòu)</h1>
<h4>好用,不錯!</h4>
</div>
</template>
2、使用id注冊組件
Vue.component('mycom3', {
template: '#tmpl'
})
三、 創(chuàng)建局部組件
局部組件的創(chuàng)建和全局組件的創(chuàng)建方法一樣。唯一區(qū)別的是，局部組件是在Vue實例中定義的。
四、組件中的data 和 methods
1、組件可以擁有自己的數(shù)據(jù)。
2、組件中的data 和實例中的data 有點不一樣，實例中的data 可以為一個對象。但是組件中的data必須是一個方法。
3、組件中的data除了是一個方法，還必須返回一個對象。
4、組件中的data 的使用方式和 實例中的data 使用方式一樣。（methods也一樣）
五、組件間的通信方式
props/$emit
父組件A通過props的方式向子組件B傳遞，B to A 通過在 B 組件中 $emit, A 組件中 v-on 的方式實現(xiàn)。
子組件：
<template>
<div class="hello">
<ul>
<li v-for="(user,index) in users" v-bind:key="index">{{ user }}</li>
</ul>
</div>
</template>
<script>
export default {
name: "users",
props: {
users: { //父組件中子標簽自定義的名字
type: Array,
require: true
}
}
}
</script>
<style scoped>
li{
list-style-position: inside;
}
</style>
父組件：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Users v-bind:users="users"> </Users>
</div>
</template>
<script>
import Users from "@/components/users";
export default {
name: 'App',
data(){
return {
users: ['西安郵電','西安石油','西北政法','西安工業(yè)','西安財經(jīng)']
}
},
components: {
Users,
}
}
</script>
通過事件形式
子組件：
<template>
<header>
<h1 @click="changeTitle">{{ title }}</h1>
</header>
</template>
<script>
export default {
name: "Son",
data(){
return {
title: 'Vue.js Demo'
}
},
methods: {
changeTitle(){
this.$emit('titleChanged','西安郵電大學(xué)');
}
}
}
</script>
<style scoped>
h1{
background-color: greenyellow;
}
</style>
父組件：
<template>
<div id="app">
<Son v-on:titleChanged="updateTitle"></Son>
<h2>{{ title }}</h2>
</div>
</template>
<script>
import Son from "@/components/Son";
export default {
name: "Father",
data(){
return {
title: '傳遞的是一個值'
}
},
methods: {
updateTitle(e){
this.title = e
}
},
components:{
Son,
}
}
</script>
總結(jié)
子組件通過events(事件)給父組件發(fā)送消息，實際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件。
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
在本篇文章里小編給大家分享了關(guān)于vue安裝遇到的5個報錯小結(jié)以及解決方法，需要的朋友們參考下。2019-06-06
本文介紹了如何刪除全局和本地的webpack及其CLI,并提供了檢查webpack殘余文件的方法,總結(jié)了個人的操作經(jīng)驗,旨在為讀者提供參考,并期待獲得更多支持2024-09-09
前端插件庫之vue3使用vue-codemirror插件的步驟和實例
CodeMirror是一款基于JavaScript、面向語言的前端代碼編輯器,下面這篇文章主要給大家介紹了關(guān)于前端插件庫之vue3使用vue-codemirror插件的步驟和實例,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了vue選項卡切換登錄方式小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Vue循環(huán)組件加validate多表單驗證的實例
今天小編就為大家分享一篇Vue循環(huán)組件加validate多表單驗證的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vite.config.js是Vite框架中的配置文件,用于配置項目的構(gòu)建和運行時的行為,下面這篇文章主要給大家介紹了關(guān)于vite項目vite.config.js詳細配置的相關(guān)資料,需要的朋友可以參考下2023-05-05
provide和inject在Vue 2中已經(jīng)被廣泛應(yīng)用，不是新鮮API，3.0重新認識一下它們兩個，本文重點給大家介紹vue3中provide和inject的使用，需要的朋友參考下吧2021-07-07
文章介紹了vue中向子組件傳值并允許修改的機制,通過defineModel實現(xiàn)雙向綁定,它返回一個ref,并且可以配置底層prop的選項,本文結(jié)合實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2025-01-01
element?ui時間日期選擇器el-date-picker報錯Prop?being?mutated:"
在日常開發(fā)中,我們會遇到一些情況,限制日期的范圍的選擇,下面這篇文章主要給大家介紹了關(guān)于element?ui時間日期選擇器el-date-picker報錯Prop?being?mutated:?"placement"的解決方式,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue3.0 CLI - 3.2 - 路由的初級使用教程,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09