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

 更新时间:2018年02月28日 15:22:51   作者:museions   我要评论
下面小编就为大家分享一篇vue 组件 全局注册和局部注册的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

全局组件

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 组件 全局注册和局部注册的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决vue+ element ui 表单验证有值但验证失败问题

    解决vue+ element ui 表单验证有值但验证失败问题

    这篇文章主要介绍了vue+ element ui 表单验证有值但验证失败,本文通过实例代码给大家分享解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • 关于Vue单页面骨架屏实践记录

    关于Vue单页面骨架屏实践记录

    这篇文章主要给大家介绍了关于Vue单页面骨架屏实践的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-12-12
  • Vue实现回到顶部和底部动画效果

    Vue实现回到顶部和底部动画效果

    这篇文章主要为大家详细介绍了Vue实现回到顶部和底部动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 详解vue-cli中的ESlint配置文件eslintrc.js

    详解vue-cli中的ESlint配置文件eslintrc.js

    本篇文章主要介绍了vue-cli中的ESlint配置文件eslintrc.js详解 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • VUE长按事件需求详解

    VUE长按事件需求详解

    这篇文章主要为大家详细介绍了为大家详细几种长按事件的需求,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • vue如何进行动画的封装

    vue如何进行动画的封装

    这篇文章主要介绍了vue如何进行动画的封装,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • Vue源码探究之状态初始化

    Vue源码探究之状态初始化

    这篇文章主要介绍了Vue源码探究之状态初始化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 解决vue.js this.$router.push无效的问题

    解决vue.js this.$router.push无效的问题

    今天小编就为大家分享一篇解决vue.js this.$router.push无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue组件和Route的生命周期实例详解

    Vue组件和Route的生命周期实例详解

    这篇文章主要介绍了Vue组件和Route的生命周期的相关知识,需要的朋友可以参考下
    2018-02-02
  • 详解vue-cli中模拟数据的两种方法

    详解vue-cli中模拟数据的两种方法

    这篇文章主要介绍了vue-cli中模拟数据的两种方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07

最新评论