详解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 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
将list转换为json失败的原因
Dec 17 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
理解javascript中DOM事件
Dec 25 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 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记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
Python定时器实例代码
2017/11/01 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
python实现udp聊天窗口
2020/03/31 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
致铅球运动员广播稿精选
2014/01/12 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
节能减排倡议书
2014/04/15 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
聊一聊python常用的编程模块
2021/05/14 Python