组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。

组件的使用有三个步骤:

1、创建组件构造器

2、注册组件

3、使用组件

先来看一段代码:

<!DOCTYPE html>
<html>
<body>
<div id="app">
<!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script> // 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>我是一个div,我是在组件构造器中创建的</div>'
}) // 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
Vue.component('my-component', myComponent)
// 3.使用组件,组件应该挂载到某个Vue实例下,否则它不会生效。
new Vue({
el: '#app'
}); </script>
</html>

访问以下就会发现 :我们自定义的组件 <my-component>已经换成了我们的组件构造器中的内容了

理解组件的创建和注册:

1、Vue.extend()是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器,而不是一个具体的组件实例

2、Vue.extend()构造器有一个选项对象,选项对象的template属性用于定义组件要旋绕的HTML

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

4、Vue.component()方法内部会调用组件构造器,创建一个组件实例

5、组件应该挂载到某个Vue实例下,否则不会生效。

全局注册和局部注册

调用Vue.component()注册组件时,组件的注册是全局的,这意味着该组件可以在任意Vue示例下使用。
如果不需要全局注册,或者是让组件使用在其它组件内,可以用选项对象的components属性实现局部注册

上面的示例可以改为局部注册的方式:

<!DOCTYPE html>
<html>
<body>
<div id="app">
<!-- 3. my-component只能在#app下使用-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
}) new Vue({
el: '#app',
components: {
// 2. 将myComponent组件注册到Vue实例下
'my-component' : myComponent
}
});
</script>
</html>

由于my-component组件是注册在#app元素对应的Vue实例下的,所以它不能在其它Vue实例下使用

<div id="app2">
<!-- 不能使用my-component组件,因为my-component是一个局部组件,它属于#app-->
<my-component></my-component>
</div> <script>
new Vue({
el: '#app2'
});
</script>
如果你这样做了,浏览器会提示一个错误:

可以看出:" Unknown custom element: <my-component> - did you register the component correctly?"

标明组件没有被创建成功,不能调用此组件,也就是说局部组件只能用在其注册的元素挂载下

总结:

全局组件用到的是 Vue.component(tagName,option)

局部组件用到的是components:{tagName:option},tagname是自定义的组件名称,option是组件构造器

/注册组件(全局 component)
Vue.component("my-component",{
template:'<div>这是一个全局组件测试 </div>'
});
new Vue({
el:"#app5"
}) //(局部components) new Vue({
el:"#app6",
components:{
'test-component':{
template:"<div>这是一个局部的组件测试</div>"
}
}
});
 

vue.js中的全局组件和局部组件的更多相关文章

  1. vue -全局组件和局部组件

    1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...

  2. vue中的全局组件和局部组件的应用

    1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...

  3. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

  4. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  5. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  6. 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  7. VUE注册全局组件和局部组件

    全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg} ...

  8. vue.js 中组件的使用

    Vue中组件的使用 方式一 1.使用Vue.extend创建组件 var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件& ...

  9. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

随机推荐

  1. ArrayList与Vector的区别

    ArrayList与Vector的区别 相同 这两个类都实现了List接口. 他们都是有序集合. 不同 ArrayList实现不是同步的,Vector实现是同步的. ArrayList与Vector都 ...

  2. VB.NET版机房收费系统---组合查询

    查询的意思就是查找,寻找,指在某一个或几个地方找出自己所要的信息,假如我想搜索一下我自己写的博客,名字叫做初雪之恋,我在百度的搜索框中输入丁国华三个字,会有怎样的惊喜等着我? 啊哦,这个信息并不是我想 ...

  3. C++ 仿函数/函数指针/闭包lambda

    在上一篇文章中介绍了C++11新引入的lambda表达式(C++支持闭包的实现),现在我们看一下lambda的出现对于我们编程习惯的影响,毕竟,C++11历经10年磨砺,出140新feature,对于 ...

  4. cas 单点登录(SSO)之一: jasig cas-server 安装

    cas 单点登录(SSO)实验之一: jasig cas-server 安装 参考文章: http://my.oschina.net/indestiny/blog/200768#comments ht ...

  5. Java进阶(二十)解疑答惑之何时字符串才算真正为空?

    解疑答惑之何时字符串才算真正为空? 在一次编码过程中,有一个现象一直困扰着自己,经过后台的不断调试,才发现原来有时候字符串的空非空.测试代码如下: // medname可为药品名称或药品ID Stri ...

  6. 11_Eclipse中演示Git版本的创建,历史版本的修改,创建分支,合并历史版本和当前版本

     1 执行以下案例: 某研发团队2011年初开发了一款名为Apollo的信息系统,目前已发布v1.0版本.此项目初期已有部分基础代码, 研发团队再此基础代码上经过3个月的努力发布了一个功能相对完备 ...

  7. Netflix Recommendations

    by Xavier Amatriain and Justin Basilico (Personalization Science and Engineering) In part one of thi ...

  8. Tomcat configuration DataSource

    1. configuration MySql Connection DataSource 原理介绍 java 调用 Tomcat 中的 ConnectionPool 通过Context 中去查找  j ...

  9. C++容器学习,与结构体排序和set来一场邂逅

    最近学习C++容器,积累一下.下面介绍set和multiset,并使用sort对结构体进行排序.C++之路漫漫其修远兮! 一.对结构体进行排序 // sort_struct.cpp : 定义控制台应用 ...

  10. android4.2添加重启菜单项

    本文主要是针对android4.2关机菜单添加重启功能 A.关机提示 android4.2/frameworks/base/policy/src/com/android/internal/policy ...