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>