详细解释vue.js全局组件和局部组件

这两天学习了很多关于Vue.js感官成分的知识，很重要，所以今天加了一个小注意。

首先，使用Vue组件有三个步骤，即创建组件构造器、注册组件和使用组件。

代码演示如下：

！DOCTYPE htmlhtml正文div id='app '！- 3.#app是由Vue实例装载的元素。使用component-my-component/my-component/div/body script src=' http : js/vue . js '/script script//1。创建一个组件构造函数var my component=vue . extend({ template 3360 ' div)这是我的第一个组件！/div' }) //2。注册组件并指定组件的标签。组件的HTML标签是my-component vue.component(' my-component '，my component)new vue({ El : ' # app ' })；/script/html2。了解组件的创建和注册

我们使用以下步骤来理解组件的创建和注册：

1.Vue.extend()是Vue构造函数的扩展，调用Vue.extend()会创建一个组件构造函数，而不是一个具体的组件实例。

2.vue.extend()构造函数有一个选项对象，该选项对象的模板属性用于定义组件要呈现的HTML。

3.使用Vue.component()注册组件时，需要提供两个参数，第一个参数是组件的标签，第二个参数是组件构造函数。

4.vue.component()方法将调用组件构造函数来创建组件实例。

5.该组件应该安装在Vue实例下，否则它不会生效。

注意第五点。下面的代码在三个地方使用了my-component标签，但是只有#app1和#app2下的my-component标签有效。

！DOCTYPE htmlhtml正文div id=' app 1 ' my-component/my-component/div id=' app 2 ' my-component/my-component/div！-组件将不被呈现-my-component/my-component/body script src=' http 3360 js/vue . js '/script script var my component=vue . extend({ template 3360 ' div这是一个组件！/div ' })Vue.component(' my-component '，my component)var app 1=new Vue({ El : ' # app 1 ' })；var app2=new vue({ El : ' # app 2 ' })/script/html全局注册和本地注册

当调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任何Vue实例下使用。

如果不需要全局注册，或者组件用在其他组件中，可以使用option对象的components属性实现本地注册。

以上示例可以更改为本地注册：

！DOCTYPE htmlhtml正文div id='app '！- 3.my-component只能在# app-my-component/my-component/div/body script src=' http : js/vue . js '/script script//1下使用。创建一个组件构造函数var my component=vue . extend({ template : ' div)这是我的第一个组件！/div'})新Vue ({el:' # app '，components 3360 {//2。将myComponent注册到vue实例下的“my-component”: my component } })；/script/html由于my-component组件是在与#app元素对应的Vue实例下注册的，因此不能在其他Vue实例下使用。

div id='app2 '！-您不能使用my-component组件，因为my-component是本地组件，属于# app-my-component/my-component/div script new vue({ El : ' # app 2 ' })；/script如果这样做，浏览器将提示一个错误。

//注册组件(全局组件)vue.component ('my-component '，{template:' div这是一个全局组件测试/div ' })；New Vue({ el:'#app5'})/(本地组件)newvue ({el:' # app6 '，组件： { ' test-component ' 3360 { template : ' div这是一个本地组件测试/div'} }}以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。