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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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生成略缩图代码
2012/07/16 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
javascript比较文档位置
2008/04/08 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
Javascript浅谈之this
2013/12/17 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
Python3写入文件常用方法实例分析
2015/05/22 Python
Python实现比较两个列表(list)范围
2015/06/12 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python中生成ndarray实例讲解
2021/02/22 Python
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
四年级下册教学反思
2014/02/01 职场文书
教师节商场活动方案
2014/02/13 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
用Python创建简易网站图文教程
2021/06/11 Python