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


Posted in Javascript onApril 10, 2017

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件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>This is my first component!</div>'
    })
    
    // 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
    Vue.component('my-component', myComponent)
    
    new Vue({
      el: '#app'
    });
    
  </script>
</html>

2.理解组件的创建和注册

我们用以下几个步骤来理解组件的创建和注册:

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

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

3. 使用Vue.component()注册组件时,需要提供2个参数,第1个参数时组件的标签,第2个参数是组件构造器。

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

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

请注意第5点,以下代码在3个地方使用了<my-component>标签,但只有#app1和#app2下的<my-component>标签才起到作用。

<!DOCTYPE html>
<html>
  <body>
    <div id="app1">
      <my-component></my-component>
    </div>
    
    <div id="app2">
      <my-component></my-component>
    </div>
    
    <!--该组件不会被渲染-->
    <my-component></my-component>
  </body>
  <script src="js/vue.js"></script>
  <script>
    var myComponent = Vue.extend({
      template: '<div>This is a component!</div>'
    })
    
    Vue.component('my-component', myComponent)
    
    var app1 = new Vue({
      el: '#app1'
    });
    
    var app2 = new Vue({
      el: '#app2'
    })
  </script>
</html>

全局注册和局部注册

调用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>

如果你这样做了,浏览器会提示一个错误。

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

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

//(局部components)

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
FLASH 广告之外的链接
Dec 16 Javascript
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
js中for in的用法示例解析
Dec 25 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 #Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 #jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 #jQuery
vue构建单页面应用实战
Apr 10 #Javascript
bootstrap suggest下拉框使用详解
Apr 10 #Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 #Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 #Javascript
You might like
谈一谈收音机的高放电路
2021/03/02 无线电
php输出xml格式字符串(用的这个)
2012/07/12 PHP
php数组去重复数据示例
2014/02/25 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
Vue页面骨架屏的实现方法
2018/05/22 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
vue实现购物车列表
2020/06/30 Javascript
python中模块查找的原理与方法详解
2017/08/11 Python
python如何实现一个刷网页小程序
2018/11/27 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
python字符串Intern机制详解
2019/07/01 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
物业管理求职自荐信
2013/09/25 职场文书
书法比赛获奖感言
2014/02/10 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS