2.创建组件

1.不使用语法糖方式创建组件

1.创建一个组件

在components或者views文件夹下创建一个.vue后缀的组件

创建组件内容:

<template>
  <div>
    <h3>登录组件</h3>
    <p>用户名:<input type="text" v-model="username"  > </p>
    <p>密码:<input type="password" v-model="password"> </p>
    <p><button>登录</button> </p>
  </div>
</template>
<script>
import {ref,reactive, toRaw} from "vue"
  export default {
      setup(props) {
        const params=reactive({
          username:'admin',
          password:'123'
        })

        return {
          ...toRaw(params)
        }
      }

  }
</script>
<style lang="scss">

</style>

2.挂载组件

把当前的Login.vue组件引入到App.vue父组件中,并使用关键字components挂载该组件

APP.vue组件:

<script>
//导入Login.vue组件,并使用变量Login代表该组件
import Login from "./components/Login"
export default {
  //局部挂载组件
  components:{
    //给需要挂载的Login组件起一个组件的名字:login-com
      "login-com":Login
  },
  setup(props) {

  }
}
//使用的组件的步骤:
  //1.创建组件:根据需求创建响应的内容
  //2.挂载组件:2.1需要先引入组件 2.2使用关键字components挂载该组件
 //挂载组件时的名字:可以使用小写,大写,小驼峰,大驼峰,中划线的方式都可以
 //3.使用组件:挂载好的组件像使用普通的html标签一样使用.
//使用组件的名字:无论挂载的时候使用的是那种方式命名的,使用组件的///名字都只能使用中划线的方式,如果挂载的时候是小写,直接使用小写即可.//标签要使用双标签.在vue-cli中可以使用大驼峰和小驼峰,也可以使//用单标签但是在html中是不识别的
 //注意:不能使用html中已经占用的标签
</script>

3.使用组件

<template>
<div>
  <!-- 将挂载好的组件展示在页面上 -->
  <login-com></login-com>
  </div>
</template>

2.使用setup语法糖

vue3语法在引入Login组件后，需要在components中注册对应的组件才可使用。在setup语法糖中自动注册子组件,无需挂载.

比如在Home.vue组件中引入Login.vue子组件

<template>
  <div class="home">
    <Login></Login>
  </div>
</template>

<script setup>
  import Login from "../components/Login"
</script>