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>