老杜Vue2+3 (61 ~ 62) 组件

最新推荐文章于 2025-06-04 19:45:15 发布

原创最新推荐文章于 2025-06-04 19:45:15 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Vue中的组件和组件化概念，包括如何定义和使用组件，以及局部和全局注册组件的方法。通过实例展示了在HTML中创建和使用组件的步骤，强调了组件化在提高代码组织和维护性方面的优势。

前言

本文章记录，跟b站动力节点老杜视频学Vue 的笔记

一、什么是组件和组件化

组件：是构建用户界面的可复用和独立的模块。可以将组件看作是一种自定义的 HTML 元素，它可以包含自己的模板、样式和逻辑。

组件化：是指将一个复杂的应用程序或页面拆分成多个小组件的过程。每个组件都有自己的职责和功能，并可以相互配合形成完整的应用程序。通过将应用程序拆分为多个组件，可以提高代码的可维护性、复用性和可测试性。

在 Vue 中，可以使用 Vue.component() 函数创建组件，并在其他组件或应用程序中引用和使用它们。每个组件可以有自己的数据、方法、生命周期钩子等。组件可以通过 props 接收父组件传递的数据，并通过事件向父组件发送消息。

组件化使得开发人员能够更好地组织和管理代码，减少了代码的重复性，同时也提供了更灵活、可扩展的开发方式，以及更好的分工协作能力。在复杂的应用程序中，组件化可以帮助我们快速开发、维护和优化代码。

第一个组件

注意事项如下图：

在这里插入图片描述

编写组件可分为以下三步骤：
第一步：在标签script中定义组件变量 const myComponent = Vue.extend({ template:·编写需要的标签·
data(){
return obj // 这里返回的的值是一个对象，类似new Vue 中的data 配置项
}
})
第二步：在vm对象中注册对象（这里先局部注册），需要用到新的配置项components:{组件名：组件变量，
}
第三步：使用自己注册的组件，在body中需要的地方使用自己定义的组件名，以标签的形式使用即可

具体案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个组件</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="mydiv">
        <h1>{{msg}}</h1>
        <objli></objli>
    </div>
    
    <script>
        const myComponent =Vue.extend({
            template:`
            <ul>
                <li v-for="(obj,index) in objs" :key="obj.age">
                {{obj.name}},{{index}}
                </li>
            </ul>
            `,
            data(){
                return {
                    objs: [
                        {'name':'cyh','age':23},
                        {'name':'chh','age':22},
                        {'name':'cyy','age':21}
                    ]
                }
            }
        })

        const vm =new Vue({
            el: '#mydiv',
            data:{
               msg:"第一个组件",
            },
            // 局部注册
            components:{
                objli : myComponent,
            }
        })
    </script>
</body>
</html>

第二个组件（全局注册）

细节:
1.Vue.extend()可以省略
2.组件的名字
第一种;全部小写
第二种:首字母大写，后面都是小写
第三种: kebab-case命名法(串式命名法。例如: user- login)
第四种: CamelCase命名法(驼峰式命名法。例如: UserLogin) ，但是这种方式只允许在脚手架环境中使用。
3.注册全局组件的方法：Vue.component(“组件名”，组件变量)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熟练测试组件的写法</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="mydiv">
        <h1>{{msg}}</h1>
        <persons_li></persons_li>
        
    </div>
    
    <script>
        const MyComponent = {
            template:`
            <ul>
            <li v-for="(value,index) in persons" :key="value.id">
                {{value.name}}
            </li>
            </ul>
            `,
            data(){
                return {
                    persons:[{'id':2021,'name':'cyh'},{'id':2022,'name':'cyh2'}]
                }
            }

        }
        Vue.component("persons_li",MyComponent)
        const vm =new Vue({
            el: '#mydiv',
            data:{
               msg:"熟练测试组件的写法",
            },
        })
    </script>
</body>
</html>