vue3 快速上手（中

最新推荐文章于 2024-10-01 20:12:28 发布

Robo12138

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量140

点赞数

分类专栏： vue3 文章标签： javascript 前端

本文链接：https://blog.csdn.net/eilan_chiu/article/details/126851188

版权

本文深入探讨Vue3的组件和props使用，包括全局与局部组件的创建，利用v-bind传递数据。同时讲解了Vue3的生命周期函数，如beforeCreate、mounted等，并给出在实际应用中的示例，如在生命周期中处理数据请求和存储。

摘要由CSDN通过智能技术生成

简介：本文记录一些Vue 3的知识点和一些简单的应用demo,记录学习过程，提升一下记忆与梳理知识点的能力,上我已经安装了less，直接安装即可使用

组件，组件就是将页面可以反复使用的模块拆解出来，可以反复调用，或者页面太大拆分开来便于维护和管理.
全局组件创建

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

局部组件：创建Example.vue

<template>
	<div>
		<h1>A Vue example</h1>
	</div>
</template>
<style></style>
<script></script>

局部注册注意大小写
App.vue: script

import HelloWorld from './components/HelloWorld.vue'

export default{
	components: {
		HelloWorld
	}
}

使用

<template>
	<!--旧-->
	<hello-world></hello-world>
	<!--新-->
	<HelloWorld />
</template>

不得不说的是 volar 用起来很顺手你可以直接写组件不用手动引入了，components 也是自动注册了

练习：假设我们在开发一个商城网站，我们有很多个页面都要使用到商品列表product-list 于是我们可以把列表提炼成一个组件ProductList.vue
componensts 下创建一个ProductList.vue

<template>
  <div c

关注

专栏目录