Vue笔记【Vue中的组件化开发】_vue开发组件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_56612338/article/details/133942924

组件化开发

21.1组件定义

什么是组件化开发?
传统开发就是前端三件套：html，js，css，但是我们会发现重复的代码太多了，代码太过于冗余，那么组件就应运而生了，所谓组件就是代码和资源的集合，我们把需要复用的代码写成一个个的组件，需要复用的时候直接拿来用就好了，不用再重复的写相同功能的代码，代码大大得到了复用，提高了编码的效率。

在这里插入图片描述

从上面图我们可以看出，把整个浏览器页面的各个部分都拆分成一个个的组件，这样我们就可以专注于一个个组件的开发，如果某个组件出现问题，我们可以很快定位到这个组件，便于维护。

21.2局部注册组件

局部注册就是只能由注册了该组件的Vue实例可以使用，其他Vue实例不可以使用该组件

21.2.1示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h1>{{msg}}</h1>
        <userlist></userlist>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    const myComponent = Vue.extend({
        template: `
            <ul>
                <li v-for="(user,index) of users" :key="user.id">
                    {{index}},{{user.name}}
                </li>
            </ul>
            `,
        data() {
            return {
                users: [
                    { id: '001', name: 'jack' },
                    { id: '002', name: 'lucy' },
                    { id: '003', name: 'james' }
                ]
            }
        }
    }) 
    //简写形式
    /*const myComponent = {
        template: `
            <ul>
                <li v-for="(user,index) of users" :key="user.id">
                    {{index}},{{user.name}}
                </li>
            </ul>
            `,
        data() {
            return {
                users: [
                    { id: '001', name: 'jack' },
                    { id: '002', name: 'lucy' },
                    { id: '003', name: 'james' }
                ]
            }
        }
    }*/
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            msg: 'Vue组件化开发局部注册',
        },
        //局部注册
        components: {
            userlist: myComponent
        }
    });
</script>

</html>

21.2.2运行结果

在这里插入图片描述

从运行结果我们可以观察到，该组件注册到了根节点下，因为我们注册的位置就是在new vue的对象中注册的

21.3全局注册组件

21.3.1示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h1>{{msg}}</h1>
        <userlist></userlist>
        <!-- <userlogin></userlogin> -->
    </div>
    <div id="app">
        <h1>{{msg}}</h1>
        <userlist></userlist>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    //组件的创建
    const myComponent = {
        template: `
            <ul>
                <li v-for="(user,index) of users" :key="user.id">
                    {{index}},{{user.name}}
                </li>
            </ul>
            `,
        data() {
            return {
                users: [
                    { id: '001', name: 'jack' },
                    { id: '002', name: 'lucy' },
                    { id: '003', name: 'james'}
                ]
            }
        }
    }
    Vue.component('userlist', myComponent)
    //简写形式
    /* Vue.component('userlist', {
        //name: 'Xxxx',//为组件指定名字,Vue开发者工具里面显示的组件名字
        template: `
            <ul>
                <li v-for="(user,index) of users" :key="user.id">
                    {{index}},{{user.name}}
                </li>
            </ul>
            `,
        data() {
            return {
                users: [
                    { id: '001', name: 'jack' },
                    { id: '002', name: 'lucy' },
                    { id: '003', name: 'james' }
                ]
            }
        }
    })*/
    new Vue({
        el: '#app',
        data: {
            msg: '全局注册'
        }
    })
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            msg: 'Vue组件化开发局部注册',
        }
    });
</script>

</html>

21.3.2运行结果

在这里插入图片描述

从运行结果来看全局注册的组件是全局生效的，两个Vue示例都可以使用该组件。

21.4 组件的嵌套

先来一张图，我们要实现这样的效果

在这里插入图片描述

21.4.1示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件嵌套</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // 创建Y1组件
        const y1 = {
            template : `
                <div>
                    <h3>Y1组件</h3>
                </div>
            `
        }
        // 创建X1组件
        const x1 = {
            template : `
                <div>
                    <h3>X1组件</h3>
                </div>
            `
        }
        // 创建Y组件
        const y = {
            template : `
                <div>
                    <h2>Y组件</h2>
                    <y1></y1>
                </div>
            `,
            components : {y1}
        }
        // 创建X组件
        const x = {
            template : `
                <div>
                    <h2>X组件</h2>
                    <x1></x1>
                </div>
            `,
            components : {x1}
        }
        // 创建app组件
        const app = {
            template : `
                <div>
                    <h1>App组件</h1>
                    <x></x>
                    <y></y>
                </div>
            `,
            // 注册X组件
            components : {x,y}
        }
        // vm
        const vm = new Vue({
            el : '#root',
            template : `
                <app></app>
            `,
            // 注册app组件
            components : {app}
        })
    </script>
</body>
</html>

21.4.2运行效果

在这里插入图片描述

总结:组件的嵌套我们要首先记住组件的三步，1.创建组件 2.注册组件 3.使用组件然后明白哪里注册的组件就在哪里使用

21.5组件名字的小细节

第一种：全部小写
第二种：首字母大写，后面都是小写
第三种：kebab-case命名法（串式命名法。例如：user-login）
第四种：CamelCase命名法（驼峰式命名法。例如：UserLogin），但是这种方式只允许在脚手架环境中使用。
注意:
不要使用HTML内置的标签名作为组件的名字。
在创建组件的时候，通过配置项配置一个name，这个name不是组件的名字，是设置Vue开发者工具中显示的组件的名字。 z注册组件时如果组件的变量名和要注册的组件名相同的话，可以省略组件名例如:components : {app}