vue 如何注册组件？？

最新推荐文章于 2024-06-29 17:09:40 发布

昨夜太平长安888

最新推荐文章于 2024-06-29 17:09:40 发布

阅读量1.2k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/HelloWord176/article/details/106685638

版权

Vue 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

什么是组件：

组件的出现，就是为了拆分vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可！

全局注册组件：

使用： Vue.component ( ' app ' , app ) 注册全局组件, 他的第一个值是组件的名字可以自己随意命名，第二个值是定义组件模版的名字

全局注册的组件在任何地方都可以直接使用

<!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>
</head>

<body>
    <div id="app">
        <app></app>  <!--使用组件-->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = {  // 定义一个名字为 app的组件
            template: `
                <div>组件1</div>
            `
        }
        Vue.component('app' , app) // 注册全局组件, 他的第一个值是组件的名字 可以自己随意命名，第二个值是定义组件模版的名字
        var vm = new Vue({
           el:'#app',
           data:{},
           methods:{}
        });
    </script>
</body>

</html>

注册局部组件：

1. 使用 components { 组件的模版对象名字 } 推荐使用

2.使用 components { ' 自定义组件的名称 ' ，组件的模版对象名字 } ，在vue实例中注册局部组件

局部注册的组件只能在注册组件的内部使用（可以在局部注册的组件内使用全局注册的组件，但是不能在全局注册的组件使用局部注册的组件）

<!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>
</head>

<body>
    <div id="app">
        <zus></zus>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let zu = {   // 定义组件
            template: `
                <div>
                    局部组件只能在注册组件的内部使用
                </div>
            `
        }
        let zus = {
            template: `
                <div>在局部组件中使用全局注册的组件
                    <div>
                        <zu></zu>
                    </div>    
                </div>
            `
        }
        Vue.component('zu' , zu)  // 注册全局组件
        var vm = new Vue({
           el:'#app',
           components: {  //局部注册组件
               zus
           },
           data:{},
           methods:{}
        });
    </script>
</body>
</html>

2. child2 是一个局部组件，child 是一个全局组件，child2 在 child 全局组件中使用就会报错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 组件注册： 全局注册  局部注册 -->
    <div id='app'>
        <ch></ch>
    </div>
    <script src="./vue三级联动自己练习/js/vue.js"></script>
    <script>
        const child = {
            template: `
                <div>注册组件
                    <child2></child2>  
                </div>
            `
        }
        let child2 = {
            template: `
                <p>注册一个局部组件</p>
            `
        }
        Vue.component('ch',child)  //全局组件
        new Vue ({
            el: '#app',
            components: {
                child2  //局部组件
            }
        })
    </script>
</body>
</html>

报错：未知的自定义元素：<child2>-是否正确注册了组件？对于递归组件，请确保提供“name”选项。

组件中的data:

组件可以有自己的data数据；

组件中的data和实例的对象有点不一样，实例中的对象可以是一个对象，但是组件中的data 必须是一个函数方法；

组件中的 data 除了必须是一个函数方法以外，这个函数方法内部，还必须返回一个 return 对象；

组件中的 data 数据使用方法和实例中的数据使用方法完全一样！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 组件注册： 全局注册  局部注册 -->
    <div id='app'>
        <ch></ch>
    </div>
    <script src="./vue三级联动自己练习/js/vue.js"></script>
    <script>
        const child = {
            template: `
                <div>注册组件
                    <p>{{ title }}</p>
                </div>
            `,
            data(){
                return {
                    title: '这是组件中的数据'
                }
            }
        }
        let child2 = {
            template: `
                <p>注册一个局部组件</p>
            `
        }
        Vue.component('ch',child)  //全局组件
        new Vue ({
            el: '#app',
            components: {
                child2  //局部组件
            }
        })
    </script>
</body>
</html>

为什么组件中的 data 必须是一个函数?

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，因为对象是一个引用数据类型，就会造成一个变了全都会变的结果。

例子：

<!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 src="./js/vue.js"></script>
</head>

<body>
    <div id="app"> 
        <!-- 调用三次com组件 ,每次使用的话 都会共用外部定义的对象，因为对象是一个引用数据类型，所以就造成一个变 全部都跟着改变-->
        <com></com>   
        <hr>
        <com></com>
        <hr>
        <com></com>
        
    </div>
    <script>
        var obj = {  // 声明一个对象
            num: 0
        }
        var com = {
            template:`
                <div>
                    <h4>按钮被点击了{{num}}次</h4>
                    <button @click="click">按钮</button>
                </div>
            `,
            data() {
                return obj  // 返回一个外部定义的 对象
            },
            methods: {
                click() {
                    this.num++
                }
            },
        }
        Vue.component('com' , com)
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{}
        });
    </script>
</body>

</html>

组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，如下面这个例子：

<!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 src="./js/vue.js"></script>
</head>

<body>
    <div id="app"> 
        <com></com>   
        <hr>
        <com></com>
        <hr>
        <com></com>
        
    </div>
    <script>
        var com = {
            template:`
                <div>
                    <h4>按钮被点击了{{num}}次</h4>
                    <button @click="click">按钮</button>
                </div>
            `,
            data() {  // 组件中的data 必须是一个函数，这个函数方法内部，还必须返回一个 return 对象；
                return {
                    num : 0,
                }
            },
            methods: {
                click() {
                    this.num++
                }
            },
        }
        Vue.component('com' , com)
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{}
        });
    </script>
</body>

</html>