Vue - 局部组件

可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件:

var Child = {
  template: '<div>A custom component!</div>'
}

new Vue({
  // ...
  components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
  }
})

在其他Vue实例中,局部组件不会起作用

<div id="app">
  <my-test></my-test>
</div>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    components:{
      'my-test': {
        template:`
    <div>
      <p>测试</p>
    </div>
  `
      }
    }
  });
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,452评论 0 29
  • Vue 组件概念图: Vue 父子组件通信图: 公共组件全部放在src\components\下 在src\com...
    圆梦人生阅读 5,794评论 0 7
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 9,232评论 5 14
  • G小姐一早醒来觉得额头有些异感,惺忪着双眼站到镜子前,顿时提了神,哎呀妈呀,两颗硕大的痘硬是从额头挤了出来。看来脸...
    headfirst肉肉郭小痞阅读 3,315评论 1 3
  • 学习是怎样的一个过程呢 我们最近在学习二元一次方程组的解法,许多同学认为这是一个全新的知识点,好像挺难。 这这里,...
    冬日暖阳11阅读 4,014评论 0 0