09.Vue3.x中的单文件组件 定义组件 注册组件 以及组件的使用

一、Vue3.x父子组件介绍

组件可以拓展html标签，解决html标签构建运用的不足，Vue项目由一个一个的组件组成。

src目录新建components目录，如果脚手架搭建的项目，默认会带有该目录，用来存放组件

在components目录新建Home.vue(组件名称首字母大写)

<template>
    <h5>{
  { title }}</h5>
    <button @click="getTitle()">获取标题</button>
</template>

<script>
    export default {
    
        name: "Home",
        data() {
    
            return {
    
                title:"首页组件"
            }
        },
        methods: {
    
            getTitle(){
    
                console.log(this.title);
            }
        }
    }
</script>

<style lang="scss" scoped>
    h5{
    
      text-align: center;
    }
</style>

在App.vue挂载引用组件

<template>
    <h2>{
  {msg}}</h2>
    <hr>
    <Home></Home>
</template>

<script>