《Vue3 四》Vue 的组件化

组件化:将一个页面拆分成一个个小的功能模块,每个功能模块完成自己部分的独立的功能。任何应用都可以被抽象成一棵组件树。

Vue 中的根组件:

Vue.createApp() 中传入对象的本质上就是一个组件,称之为根组件(APP 组件)。

复制代码
<div id="app">
    <div>{{message}}</div>
</div>

<script>
	// 组件
	const APP = {
	    data() {
	        return {
	            message: 'Hello Vue',
	        }
	    },  
	}   
	// Vue.createApp() 中传入对象的本质上就是一个组件,称之为根组件(APP 组件)
	const app = Vue.createApp(APP)
	app.mount('#app')
</script>

注册组件:

每个组件都可以拥有自己的模板、样式、代码逻辑。注册组件分为两种:

  1. 全局组件:在任何其他的组件中都可以使用的组件。
  2. 局部组件:只有在注册的组件中才能使用的组件。

只要注册了全局组件,即使代码中没有用到,Webpack 等打包工具依然会对其进行打包;局部组件如果没有用到,将不会对其进行打包。

注册全局组件:

全局组件需要使用全局创建的 app 来注册,通过 app.component() 方法传入组件名称、组件对象即可注册一个全局组件。

复制代码
<div id="app">
    <!-- 使用全局组件 -->
    <product-item></product-item>
</div>

<script>
	const app = Vue.createApp()
	
	// 创建组件对象
	const productItem = {
	    template: '<div>我是一个组件</div>'
	}
	// 注册全局组件
	app.component('product-item', productItem)
	
	app.mount('#app')
</script>

组件的 template 模板还有另外一种写法。

复制代码
<!-- 编写组件模板 -->
<template id="product-item-template">
    <div>我是一个组件</div>
</template>

<div id="app">
    <product-item></product-item>
</div>

<script>
const app = Vue.createApp()

const productItem = {
    // 使用组件模板
    template: '#product-item-template'
}
app.component('product-item', productItem)

app.mount('#app')
</script>

注册局部组件:

局部组件通过 components 属性选项来进行注册,该选项对应的是一个对象,对象中的键值对是 组件名称:组件对象

复制代码
<div id="app">
    <!-- 使用局部组件 -->
    <product-item></product-item>
</div>

<script>
	// 创建组件对象
	const productItem = {
	    template: '<div>我是一个组件</div>'
	}
	
	const app = Vue.createApp({
	    // 注册局部组件
	    components: {
	        'product-item': productItem,
	    }
	})
	app.mount('#app')
</script>

组件的 template 模板还有另外一种写法。

复制代码
<!-- 编写组件模板 -->
<template id="product-item-template">
    <div>我是一个组件</div>
</template>

<div id="app">
    <product-item></product-item>
</div>

<script>
const app = Vue.createApp({
    components: {
        'product-item': {
        	// 注册组件模板
            template: '#product-item-template',
        }
    }
})

app.mount('#app')
</script>

定义组件名称的方式:

定义组件名称的方式有两种:

  1. 使用 kebab-case 短横线分隔符。

    复制代码
    // 使用
    <product-item></product-item>
    
    // 定义
    app.component('product-item', productItem)
  2. 使用 PascalCase 大驼峰标识符。

    复制代码
    // 使用。在原生 HTML 文件中这么写是无效的,因为 HTML 不区分大小写;不过在 Vue 文件中就没有这个问题了
    <productItem></productItem>
    
    // 定义
    app.component('productItem', productItem)
相关推荐
sen_shan1 天前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
路光.2 天前
Vue3实现锚点定位
前端·javascript·vue.js·vue3
wocwin5 天前
uniapp微信小程序封装navbar组件
微信小程序·uni-app·vue3·组件封装·navbar
留白声8 天前
uniapp主题切换功能,适配H5、小程序
前端·css·小程序·uni-app·vue3·主题切换
dr李四维11 天前
uniapp从 vue2 项目迁移到 vue3流程
javascript·vue.js·uni-app·vue3·vue2·vuex·vue迁移
Jiaberrr15 天前
Vue 3 中使用 vue - pdf - embed + vue3 - pdfjs 在线预览 PDF
前端·javascript·vue.js·前端框架·pdf·vue3
努力做大神17 天前
uniapp vue3项目定义全局变量,切换底部babar时根据条件刷新页面
uni-app·vue3
柒@宝儿姐18 天前
如何判断一个项目用的是哪个管理器
前端·javascript·vue.js·vue3
爱看书的小沐18 天前
【小沐学Web3D】three.js 加载三维模型(vue3)
javascript·vue·vue3·webgl·three.js·opengl·web3d
山闻愚22 天前
创建Electron35 + vue3 + electron-builder项目,有很过坑,记录过程
vue3·electron35