我們這邊在來討論一下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父子組件之間的調用,我們不難發現,父組件當中在調用子組件時，基本與2.0相同，而在子組件當中,要想獲取到父組件傳遞過來的參數,我們是直接在setup()中直接獲取到props值和emit事件。這是因為setup為我們提供了props以及context這兩個屬性，而在context中又包含了emit等事件。
或許有人看到這里會問，為什么不用this.$emit的方法來向外觸發子組件事件呢?

因為在3.0當中已經不在使用this關鍵詞

其他作者目前能感覺到的的變化可以參考上一篇vue2.0與3.0對比以及vue3.0 API變化入門