vue 组件 全局注册和局部注册的实现


Posted in Javascript onFebruary 28, 2018

全局注册,注册的组件需要在初始化根实例之前注册了组件;

局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用:

全局组件

js

Vue.component('tab-title',{
   props:['title'],
   template:'<li v-on:click="$emit(\'change\')">{{title}}</li>'
 })
 Vue.component('tab-content',{
   props:['content'],
   template:'<div>{{content}}</div>'
 })

局部组件demo:

html

<div id="app">
  <ul class="navTab">
   <li v-for="(navTab,index) in navTabs" is="tab-title" v-bind:info="navTab.text" v-bind:class="{active:navTab.isActive}" v-on:addactive="switchActive(index)"></li>
  </ul>
  <div class="tabContent">
   <div v-for="navTab in navTabs" is="tab-content" v-bind:content="navTab.tabContent" 
   v-bind:class="['tab-panel',{active:navTab.isActive}]" v-if="navTab.isActive"></div>
  </div>
  </div>

js

var app=new Vue({
      el: '#app',
     components: {
       'tab-title': {
        props:['info'],//接受父元素传递的参数
        template:'<li v-on:click="$emit(\'addactive\')">{{info}}</li>'//点击时传递通过$emit子元素传递给父元素调用 addactive方法(不能使用驼峰写法)
        },
       'tab-content':{
         props:["content"],
        template:'<div>{{content}}</div>'
       }
     },
     methods:{
       switchActive:function(index){
        for(var i=0;i<this.navTabs.length;i++){
         this.navTabs[i].isActive=false;
        }
        this.navTabs[index].isActive=true;
        
       }
     },
     data:{
      navTabs:[
       {
        text:"tab1",
        isActive:true,
        tabContent:'this is tab1 content'
       },
       {
        text:"tab2",
        isActive:false,
        tabContent:'this is tab2 content'
       },
       {
        text:"tab3",
        isActive:false,
        tabContent:'this is tab3 content'
       }
      ]
     }
    });

组件实例的作用域是孤立的。这意味着不能再子组件的模板内直接引用父组件的数据。要让子组件可以使用父组件的数据,我们需要通过子组件的props选项。

子组件要显式地用 props 选项声明它期待获得的数据

在模板中,要动态地绑定父组件的数据到字模板的props,与绑定到任何普通的HTMO特性相类似。就是使用 v-bind。每当父组件的数据变化时,该变化也会传递给子组件:

所有的vuejs组件都是被扩展的vue实例

每一个Vue实例都会代理这个实例的data属性对象里的所有的属性

所有的Vue实例本身保罗的属性和方法,都以$开头来区别,对应Vue.set

例如:

vm.$data

vm.$methods

vm.$watch

这个有利于和data属性对象的数据来区分

多有的指令都以v-xxx形式存在:

以上这篇vue 组件 全局注册和局部注册的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
js中的数组对象排序分析
Dec 11 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 #Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 #Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 #Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 #Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 #Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 #Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 #Javascript
You might like
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
javascript下function声明一些小结
2007/12/28 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python获得图片base64编码示例
2014/01/16 Python
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
wxPython窗口中文乱码解决方法
2014/10/11 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
python TCP包注入方式
2020/05/05 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
abstract class和interface有什么区别
2013/08/04 面试题
学校食品安全实施方案
2014/06/14 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers