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 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
vue实现记事本功能
Jun 26 Javascript
js实现表格单列按字母排序
Aug 12 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
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
小程序实现搜索框
2020/06/19 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
Python contextlib模块使用示例
2015/02/18 Python
Python打印斐波拉契数列实例
2015/07/07 Python
使用Python绘制图表大全总结
2017/02/11 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
Python BS4库的安装与使用详解
2018/08/08 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
大学生收银员求职信分享
2014/01/02 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书