vue全局和局部组件

Vue全局与局部组件详解

最新推荐文章于 2024-04-22 21:19:43 发布

原创最新推荐文章于 2024-04-22 21:19:43 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

VUE框架专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了Vue.js中全局组件和局部组件的定义方法。全局组件通过Vue.component注册，可在整个应用中使用；局部组件则在单个Vue实例的components选项中定义，仅在该实例作用域内有效。通过具体代码示例展示了两种组件的实现方式。

1，全局组件定义方法：

<div id="app">
      <ul>
        <temp></temp>
      </ul>
</div>
<script>
      Vue.component("temp",{
        template:'<li>aaa</li>'
      })      
      var vm = new Vue({
        el: "#app"
      });
</script>

2，局部组件定义方法

<div id="app">
      <ul>
        <temp></temp>
      </ul>
</div>
<script>
      var temp={
        template:'<li>bbb</li>'
      }  
      var vm = new Vue({
        el: "#app",
        components:{temp}
      });
</script>