vue.js -- 全局组件&局部组件

最新推荐文章于 2024-04-22 21:19:43 发布

爱划水de鲸鱼哥～

最新推荐文章于 2024-04-22 21:19:43 发布

阅读量142

点赞数

分类专栏： Vue3 文章标签： vue html javascript

本文链接：https://blog.csdn.net/m0_47901007/article/details/118565792

版权

Vue3 专栏收录该内容

31 篇文章 4 订阅

订阅专栏

vue组件

组件是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

在这里插入图片描述

全局组件

全局组件，全局可用，使用简单，性能不高

组件定义

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue组件</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            template:`
            <div>
                <hello />
            </div>
            `
        })
        app.component('hello', {
            template:`<div>hello</div>`
        })
        const vm = app.mount('#root');
    </script>
</body>
</html>

页面效果：
在这里插入图片描述

组件复用

组件可以复用，但数据是独立的

代码演示：

		const app = Vue.createApp({
           
            template:`
            <div>
                <hello />
                <hello />
                <hello />
                <hello />
            </div>
            `
        })
        app.component('hello', {
            data(){
                return {
                    content: "0"
                }
            },
            template:`<div @click="content++">hello {{content}}</div>`
        })

页面效果：
在这里插入图片描述

组件的组件

代码演示：

onst app = Vue.createApp({
           
            template:`
            <div>
                <parent />
                <hello />
                <hello />
                <hello />
            </div>
            `
        })
        app.component('parent', {
            template:`<div ><Hello /></div>`
        })
        app.component('hello', {
            data(){
                return {
                    content: "0"
                }
            },
            template:`<div @click="content++">hello {{content}}</div>`
        })

页面效果：
在这里插入图片描述

局部组件

局部组件定义后需要注册才能使用，性能较高，使用起来比较麻烦。

代码演示：

 		// 局部组件
        const Demo = {
            template:`<div >局部组件</div>`
        }
        const app = Vue.createApp({
            components:{ Demo },	//将使用的局部组件注册进来
            template:`
            <div>
                <Demo />
            </div>
            `
        })

页面效果：
在这里插入图片描述

总结

全局组件，全局可用，使用简单，性能不高

组件可以复用，但数据是独立的

局部组件定义后需要注册才能使用，性能较高，使用起来比较麻烦

（完）

爱划水de鲸鱼哥～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue.js -- 全局组件&局部组件

目录vue组件全局组件组件定义组件复用组件的组件局部组件总结vue组件组件是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。全局组件全局组件，全局可用，使用简单，性能不高组件定义代码演示：<!DOCTYPE html><html lang="en"><head> <meta charset="UT
复制链接

扫一扫