详解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 CSS操作方法集合
Oct 31 Javascript
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
详解JS深拷贝与浅拷贝
Aug 04 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实现可运算的验证码
2015/11/10 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
天巡全球:Skyscanner Global
2017/06/20 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
《母亲的恩情》教学反思
2014/02/13 职场文书
信息工作经验交流材料
2014/05/28 职场文书
网络技术专业求职信
2014/07/13 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
观看建国大业观后感
2015/06/01 职场文书
在职证明范本
2015/06/15 职场文书
门卫管理制度范本
2015/08/05 职场文书
vue 实现上传组件
2021/05/31 Vue.js
Python内置数据类型中的集合详解
2022/03/18 Python