详解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 相关文章推荐
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
Javascript模块化编程详解
Dec 01 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 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
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
php进程间通讯实例分析
2016/07/11 PHP
php实现留言板功能
2017/03/05 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
Python使用gensim计算文档相似性
2016/04/10 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
python中Django文件上传方法详解
2020/08/05 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
教师申诉制度
2014/01/29 职场文书
广告创意求职信
2014/03/17 职场文书
师范大学生求职信
2014/06/13 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
政风行风评议工作总结
2014/10/21 职场文书
2014年团队工作总结
2014/11/24 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
初中体育教学随笔
2015/08/15 职场文书
pandas数值排序的实现实例
2021/07/25 Python
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers