vue3.x 中的自定義組件及使用

一、在components文件夾下新建一個MyHome.vue的首頁組件

<template>
    <div>
       {{msg}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: "我是自定義的首頁組件"
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>

二、在需要用到的地方引入組件

<template>
  <div>
    <!-- 3、展示組件><-->
     <MyHome />
    <!-- 當掛載組件的名稱是2個單詞，可以用橫杠連接，使用標簽對的形式><-->
     <my-home><my-home />
  </div>
</template>

<script>
//1、引入組件
import MyHome from '../components/MyHome'
export default {
  data() {
    return {
      msg: "主頁"
    }
  },
  //2、掛載組件
  components:{
      MyHome
  }
};
</script>

其中第2步掛載組件可以使用別名比如 "v-myhome":MyHome也可以使用橫杠連接兩個單詞 "my-home":MyHome

 //2、掛載組件
  components:{
      "v-myhome":MyHome
  }

第3步調用的時候使用別名<v-myhome />

<div>
    <!-- 3、展示組件><-->
     <v-myhome />
  </div>