第四天要帶大家聊解元件(有人說元件有人說是組件),首先來介紹元件的註冊
元件註冊全局註冊與局部註冊
1.元件全局註冊在Vue根實例( new Vue)之前,注意全局註冊名稱不能重複
vue.component('name',{ /*….*/ })
nw Vue({el: '#app' })
2.我們亦可以局部註冊,透過引入component
import ComponentName from '@/xxx'
//code..
export default {
components: {
ComponentName
}
}
元件的Prop:
Props是指從父元件傳入子元件之屬性,我們可以在子元件定義它的型態(必要定義)、設定其默認值、是否為必須值、撰寫驗證函數,然而在官網有特別提到,我們應該避免直接修改Props裡面的變數,因為Object、Array都是call by reference,直接修改子元件Props會影響父元件狀態。
然而這是父元件對子元件溝通,那麼子元件是怎麼跟父元件溝通呢?是透過事件的方式,透過$emit事件,發射回去給父元件處理,如下圖示,這邊是不是有一點點Angular的味道,沒錯!
子元件:
<template>
<div class="child">
<main>
<input v-model="msgText" @input="msgChange" />
<h1>{{ msg }}</h1>
</main>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
data () {
return {
msgText: this.msg,
watchNow: Date.now()
}
},
props: {
msg: {
type: String,
default: null
}
},
methods: {
msgChange () {
console.log('msgChange')
this.$emit('msgChange',
this.msgText)
}
}
}
</script>
父元件:
<template>
<div class="parent">
<h1>This is an parent page</h1>
<ChildComponent :msg="message" @msgChange="messageUpdate">
</ChildComponent>
</div>
</template>
<script>
import ChildComponent from '@/components/ChildComponent.vue'
export default {
name: 'ParentComponent',
data () {
return {
message: 'Hello World'
}
},
components: {
ChildComponent
},
methods: {
messageUpdate (text) {
console.log('messageUpdate')
this.message = text
}
}
}
</script>
在Props屬性定義msg,子元件在事件onInput觸發時呼叫msgChange()函數,透過$emit發射msgText回去給父元件處理,而我們看到父元件使用messageUpdate()函數來接,順勢地在父元件更新了message,這樣就完成了雙向綁定。
眼尖的讀者會發現v-model,這個往後會講到。
有任何問題歡迎下方留言,如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang