一篇文章帶你了解Vue組件的創(chuàng)建和使用
一、什么是組件?
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 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)建出來的組件模板對(duì)象) 注冊(cè)組件
Vue.component('myCom1', com1)
注意:如果使用Vue.Component 注冊(cè)全局組件的時(shí)候,組件的名稱使用了駝峰命名,則在引用組件的時(shí)候需要把大寫的駝峰改為小寫的字母,同時(shí),兩個(gè)單詞之前,使用 “–” 鏈接。如果不使用則直接拿名稱來使用即可。
方式二
直接使用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>好用,不錯(cuò)!</h4> </div> </template>
2、使用id注冊(cè)組件
Vue.component('mycom3', { template: '#tmpl' })
三、 創(chuàng)建局部組件
局部組件的創(chuàng)建和全局組件的創(chuàng)建方法一樣。唯一區(qū)別的是,局部組件是在Vue實(shí)例中定義的。
四、組件中的data 和 methods
1、組件可以擁有自己的數(shù)據(jù)。
2、組件中的data 和實(shí)例中的data 有點(diǎn)不一樣,實(shí)例中的data 可以為一個(gè)對(duì)象。但是組件中的data必須是一個(gè)方法。
3、組件中的data除了是一個(gè)方法,還必須返回一個(gè)對(duì)象。
4、組件中的data 的使用方式和 實(shí)例中的data 使用方式一樣。(methods也一樣)
五、組件間的通信方式
props/$emit
父組件A通過props的方式向子組件B傳遞,B to A 通過在 B 組件中 $emit, A 組件中 v-on 的方式實(shí)現(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: { //父組件中子標(biāo)簽自定義的名字 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è)','西安財(cái)經(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: '傳遞的是一個(gè)值' } }, methods: { updateTitle(e){ this.title = e } }, components:{ Son, } } </script>
總結(jié)
子組件通過events(事件)給父組件發(fā)送消息,實(shí)際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件。
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
axios對(duì)請(qǐng)求各種異常情況處理的封裝方法
今天小編就為大家分享一篇axios對(duì)請(qǐng)求各種異常情況處理的封裝方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue實(shí)現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能
這篇文章主要介紹了vue實(shí)現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能,需要的朋友可以參考下2019-04-04vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟
這篇文章主要給大家介紹了關(guān)于vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者使用vue-cli具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10VUE學(xué)習(xí)之Element-ui文件上傳實(shí)例詳解
今天進(jìn)行了element?文件上傳組件的運(yùn)用,寫一下心得,下面這篇文章主要給大家介紹了關(guān)于VUE學(xué)習(xí)之Element-ui文件上傳的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10vue+iview?Table表格多選切換分頁保持勾選狀態(tài)
這篇文章主要為大家詳細(xì)介紹了vue+iview?Table表格多選切換分頁保持勾選狀態(tài),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)
這篇文章主要介紹了Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03vue3引入highlight.js進(jìn)行代碼高亮的方法實(shí)例
最近忙著開發(fā)自己的開發(fā)腳手架,在做代碼生成器的時(shí)候,有個(gè)預(yù)覽功能,需要讓代碼高亮,下面這篇文章主要給大家介紹了關(guān)于vue3引入highlight.js進(jìn)行代碼高亮的相關(guān)資料,需要的朋友可以參考下2022-04-04Vue3使用 createApp 自定義通用Dialog的方法
這篇文章主要介紹了Vue3使用 createApp 自定義通用Dialog的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01