美文网首页
1-2 vue组件-全局注册和局部注册

1-2 vue组件-全局注册和局部注册

作者: 绣依锐 | 来源:发表于2018-08-27 20:47 被阅读0次

组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素

1、注册全局组件:(所有实例都能用全局组件。)

Vue.component 作用是告诉 Vue 在处理 template 时,将 替换为相应的组件。

  • 它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。
  • 在所有子组件中也是如此,也就是说这全局注册组件在各自内部也都可以相互使用。

Vue.component(tagname, options)

tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:<tagname></tagname>

<div id="app">
  <tagname01></tagname01>
</div>
<script>
Vue.component('tagname01',{
  template: '<div>我是全局组件</div>' 
})
new Vue({
    el:'#app'
})
</script>

2、注册局部组件(局部注册的组件在其子组件中不可用)

全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加

<div id="app">
    <tagname02></tagname02>
</div>
<script>
var Child = {
    template: '我是局部组件'
}
var app = new Vue({
    el: '#app',
    components:{ 
        'tagname02': Child  //将tagname02组件注册到Vue实例下
    }
})
</script>

相关文章

  • Vue 之 组件

    组件注册 组件注册分为两种: 全局注册 和 局部注册 全局注册:全局注册的行为必须在根 Vue 实例 ...

  • vue的组件注册

    vue的组件注册: 全局注册 局部注册

  • Vue2.0注册局部组件和全局组件

    记录一下不使用vue-router注册局部组件和全局组件 注册一个局部组件 文件:agg.vue 注册一个全局组件

  • vue组件

    关于vue组件的总结 注册组件 vue中组件的注册分为两种: 全局注册 局部注册 全局注册 全局注册的组件在任何v...

  • Vue 组件全局注册和局部注册使用及原理

    Vue在注册组件时有两种方式,全局注册和局部注册全局注册的话我们可以在任意组件中使用注册的组件,而局部注册的话我们...

  • Vue 全局组件和局部组件

    vue、js、html文件都可以注册全局组件和局部组件 全局组件 局部组件 vue-custom-element ...

  • 组件

    注册组件 注册组件分为全局注册和局部注册。 全局注册 step1.用Vue.component()方法定义一个组件...

  • VUE的component和components

    component是注册全局组件,在实例化VUE前调用,注册后可以全局使用 components是局部注册组件,注...

  • vue升级之路(二)-- vue组件间方法调用及数据传输

    注册vue组件的几种方式 全局注册(这种方式注册组件必须在vue实例化之前声明) 局部注册 扩展实例 组件之间的数...

  • 深入了解组件

    组件注册   组件注册分为全局注册和局部注册  全局注册   局部注册   基础组件的自动化全局注册可能你的许多组...

网友评论

      本文标题:1-2 vue组件-全局注册和局部注册

      本文链接:https://www.haomeiwen.com/subject/ogxfbftx.html