vue全局组件定义（Vue全局组件和局部组件的注册）

时间2025-06-17 00:02:55分类IT科技浏览3756

导读： 组件的简介：...

组件的简介：

组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树：

组件的基本使用：

创建一个Vue实例需要创建后才能使用，组件也需要进行注册后才能使用。注册组件分为全局注册和局部注册两种方式。

全局注册：

1.注册全局组件

注册组件就是利用Vue.component() 方法，先传入一个自定义组件的名字，然后传入这个组件的配置

//定义一个名为 my-component 的新组件

Vue.component(my-component),{

//组件内容写在这里

template:" <lable>自己的组件</lable> "

注："" 不支持换行，使用模板字符串支持换行 ` `

})

如上方式，就说明创建了一个自定义组件，然后可以在Vue实例挂在DOM元素中使用它。

<my-cpmponent></my-component>

</div>

//定义一个名字为my-component的组件

Vue.component(my-component,{

//组件内容写这里

template:"<lable>自己的组件</lable>"

})

//声明一个vue实例

var vm = new Vue({

el:"#app",

)}

</script>

归纳总结：

创建全局组件时，应该使用Vue对象的component方法，这个方法接收两个参数。第一个字符串：表示组件名称，第二个为一个对象：表示组件内容组件要渲染的内容应该写在template选项中，作为其值进行处理注册时，推荐组件名称为【小写加分隔符链接的形式】，类似于css属性名的写法组件全局注册后，在任何vue实例中都可以使用，但前提是相关vue实例应该在注册后在声明组件在使用时，应该以标签形式调用

2.全局组件的进阶使用

（一）组件复用性的基本体现：定义后的组件可以通过标签多次调用

<div id="app"> <my-component></my-component> <my-component></my-component> <my-component></my-component> <my-component></my-component> </div> <script> // 定义一个名为 my-component 的新组件 Vue.component(my-component, { //组件内容写这里 template: "<div>这是一个全局组件</div>", }) //声明一个vue实例 var vueApp = new Vue({ el: #app, }) </script>

（二）组件的template选项

注意：组件中的template只能有一个根元素。下面的情况是不允许的：

template: `<div>这是一个全局组件</div> <button>hello</button>`,

如果外层有多个根元素，那么就只会渲染第一个根元素

（三）全局组件可以在其注册后创建的所有vue实例中使用

<div id="app">  <my-component></my-component> </div> <div id="app1">  <my-component></my-component> </div> <script> // 定义一个名为 my-component 的新组件 Vue.component(my-component, { //组件内容写这里 template: "<div>这是一个全局组件</div>", }) //声明一个vue实例 var vueApp = new Vue({ el: #app, }); var vueApp = new Vue({ el: #app1, }); </script>

（四）全局组件一定要在所有vue实例创建之前注册定义

<div id="app"> <p>我是第一个div</p> <my-component></my-component> </div> <div id="app1"> <p>我是第二个div</p> <my-component></my-component> </div> <script> //声明一个vue实例 var vueApp = new Vue({ el: #app, }); // 定义一个名为 my-component 的新组件 Vue.component(my-component, { //组件内容写这里 template: "<div>这是一个全局组件</div>", }) var vueApp = new Vue({ el: #app1, }) </script>

（四）全局组件一定要在所有vue实例创建之前注册定义

③组件内容中的其他选项

（一）组件中的data必须是函数

可以看出，注册组件时传入的配置和创建Vue实例差不多，但也有不同，其中一个就是data属性必须是一个函数。这是因为如果像Vue实例那样，传入一个对象，由于JS中对象类型的变量实际上保存的是对象的引用，所以当存在多个这样的组件时，会共享数据，导致一个组件中数据的改变会引起其他组件数据的改变。

而使用一个返回对象的函数，每次使用组件都会创建一个新的对象，这样就不会出现共享数据的问题来了

<body> <div id="app"> <p>我是第一个div</p> <my-component></my-component> </div> <script> Vue.component(my-component, { //组件内容写这里 template: "<div>{{message}}</div>", }) //声明一个vue实例 var vueApp = new Vue({ el: #app, data:function(){ return{ message:这是一个全局组件, } } }); </script>

局部注册

注册局部组件

Vue实例中有个选项components可以注册局部组件，注册后就只在该实例作用域下有效

<div id="app"> <my-component></my-component> </div> <script> var vueApp = new Vue({ el: #app, components: { my-component: { template: <div>{{message}}</div>, data: function () { return { message: 这是一个局部组件, } } } } }); </script>

效果演示

（一）组件中嵌套

<div id="app"> <my-component></my-component> </div> <script> var vueApp = new Vue({ el: #app, components: { my-component: { //调用该局部组件下的局部组件<next-component> template: <div>{{message}}<next-component></next-component></div>, data: function () { return { message: 这是一个局部组件, } }, components:{ next-component:{ template:<div>这是局部组件下的局部组件</div> } } } } }); </script>

效果图

可以在组件的components选项中声明多个组件，在components中：每个组件都是一个键值对。键名为组件名，键值为组件内容

（二）在组件中定义子组件时，可以使用外部定义对象作为组件内容

<div id="app"> <my-component></my-component> </div> <script> var obj1 = { template:`<div>我是第一个子div</div>` } var obj2 = { template:`<div>我是第二个子div</div>` } Vue.component(my-component,{ template:`<div> <sub1></sub1> <sub2></sub2> </div>`, components: { sub1:obj1, sub2:obj2 } }) var vueApp = new Vue({ el: #app, }); </script>

效果图

（三）组件调用时可以直接使用单标签形式

当用单标签多次调用同一组件，只会产生组件一次