详解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 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
JavaScript中的 new 命令
May 22 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 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
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
php include加载文件两种方式效率比较
2010/08/08 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
vue实现树状表格效果
2020/12/29 Vue.js
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Python中的闭包总结
2014/09/18 Python
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python制作爬虫抓取美女图
2016/01/20 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
海飞丝广告词
2014/03/20 职场文书
个人授权委托书范本
2014/04/03 职场文书
社区平安建设方案
2014/05/25 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
委托书的样本
2015/01/28 职场文书
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏
Python之matplotlib绘制饼图
2022/04/13 Python
Python 绘制多因子柱状图
2022/05/11 Python