vue3 组件化开发

 

 

脚本化组件[component]

组件（Component）是自定义封装代码的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。

而在网页中实现一个功能，需要使用html定义功能的内容结构，使用css声明功能的外观样式，还要使用js来定义功能的特效，因此就产生了把一个功能相关的[HTML、css和javascript]代码封装在一起组成一个整体的代码块封装模式，我们称之为“组件”。

 

所以，组件就是一个html网页中的功能，一般就是一个标签，标签中有自己的html内容结构，css样式和js特效。

这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。

vue的组件有两种：脚本化组件 和 单文件组件。

脚本化组件的组件名：单词小写加横杠。

 

脚本化组件

全局注册

assets/components.js，代码

 

 // 封装一个全局注册的组件
        const header_nav ={
            data(){  // 组件内部的数据
                return {
                    nav_list: ["首页","开放平台", "企业团购", "资质证照", "协议规则", "下载app"],
                    num:0,
                }
            },
            methods:{     // 组件内部的操作方法
                show(nav){
                    console.log(nav);
                        }
                    },
            // 组件的HTML代码
            template:`
                    <div class="header">
                        <ul>
                                <li v-for="nav in nav_list"><a href="" @click.prevent="show(nav)">{{nav}}</a></li>
                        </ul>
                        <button @click="num++">{{num}}</button>
                    </div>
            `,
        }

 

 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">
    <title>Title</title>
    <script src="../js/vue.global.3.2.20.js"></script>
    <script src="../js/components.js"></script>
    <style>

    </style>
</head>
<body>
    <div id="app">
        <header-nav></header-nav>
    </div>

</body>
<script>
        var vm = Vue.createApp({
            data(){
                return {

                }
            },
            methods: {

            },

        }).component("header-nav", header_nav).mount("#app")
    </script>
</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">
    <title>Title</title>
    <script src="../js/vue.global.3.2.20.js"></script>
    <script src="../js/components.js"></script>
    <style>

    </style>
</head>
<body>
    <div id="app">
        <header-nav></header-nav>
    </div>

</body>
<script>
        var vm = Vue.createApp({
            data(){
                return {

                }
            },
            methods: {

            },
            // 局部注册
            components: {
                "header-nav": header_nav
            }

        }).mount("#app")
    </script>
</html>

组件与组件之间，代码隔离，数据隔离。同一个组件被使用多次，实际上是对组件的对象进行了多次实例化，所以本质上在内存就不是同一个对象。因此才会出现数据隔离的情况。

 

 

posted @ 2025-03-14 02:24  minger_lcm  阅读(91)  评论(0)    收藏  举报