我們這邊在來討論一下vue3.0組件的使用方法
在開始介紹3.0組件的用法之前，我們可以先回顧一下2.0使用組件的方式。 在2.0當中耍休，哪個頁面需要使用組件就在哪個頁面里引入該組件耐薯，同時在頁面注冊這個組件。在傳遞參數時觅彰，父組件傳遞參數給子組件，子組件就會接收父組件傳遞過來的參數护奈。
舉個栗子：
<template>
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
子組件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return{
}
},
method:{
handleClick(){
this.$emit('childclick','123')
}
}
}
</script>
以上是最常見的父子組件之間的調用缔莲，但是在vue3.0中就存在差異。
廢話不多說,先上DJ(代碼)! 先上DJ(代碼)!
父組件
<template>
<div class="hello">
<div>123</div>
<NewComp :name="name" @childClick="parentClick"/>
</div>
</template>
<script>
import {reactive} from 'vue'
import NewComp from './newComp.vue'
export default {
components:{
NewComp
},
setup(){
const name=reactive({
name:'hello 番茄'
})
const parentClick=(e)=>{
console.log(e)
console.log('123')
}
return {name,parentClick}
}
}
</script>
子組件
<template>
<div>
<button @click="handleClick">組件</button>
</div>
</template>
<script>
export default {
setup(props,{emit} ){
const handleClick=()=>{
emit('childClick','hello')
}
return {
props,
handleClick
}
}
}
</script>
通過上面的vue3.0父子組件之間的調用,我們不難發(fā)現(xiàn),父組件當中在調用子組件時霉旗，基本與2.0相同痴奏，而在子組件當中,要想獲取到父組件傳遞過來的參數,我們是直接在setup()中直接獲取到props值和emit事件。這是因為setup為我們提供了props以及context這兩個屬性厌秒，而在context中又包含了emit等事件读拆。
或許有人看到這里會問，為什么不用this.$emit的方法來向外觸發(fā)子組件事件呢?
因為在3.0當中已經不在使用this關鍵詞
其他作者目前能感覺到的的變化可以參考上一篇vue2.0與3.0對比以及vue3.0 API變化入門
