Vue组件的全局注册和局部注册

最新推荐文章于 2023-06-28 11:22:48 发布

wanghuohuo1998

最新推荐文章于 2023-06-28 11:22:48 发布

阅读量218

点赞数

分类专栏： vue基础文章标签： vue

本文链接：https://blog.csdn.net/wanghuohuo1998/article/details/118541204

版权

vue基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue组件的全局注册和局部注册

vue的全局组件

全局组件就是所有的vue实例中都可以使用

注册全局组件方法：

可以使用Vue.extend()函数，也可以不使用，就直接使用Vue.component()来创建一个Vue 的全局组件

Vue.component('component-a',{
      // 注意这里的data必须是一个function
      data(){
        return {
          msg:'你好'
        }
      },
      template:'<h3>{{msg}}</h3>'
    })
	//创建一个Vue的根实例
    new Vue({
     el:'#app'
    })

Vue的局部组件

Vue的局部组件只能在注册它的那个vue实例中使用

并且使用component中对齐进行注册

<body>
  <div id="app">
    <component-a></component-a>
  </div>
  <script>
    var component1 = {
      data(){
        return {
          msg:'hellow'
        }
      },
        template:'<h3>{{msg}}</h3>'
    }
	//创建Vue的一个根实例
    new Vue({
      el:'#app',
      data(){
        return {
        }
      },components:{
        // component-a只能在他的父模板中使用，就是#app服务的那个模板
        // 注意：component1不加引号
       'component-a':component1
      }
    })
  </script>
  
</body>

wanghuohuo1998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件的全局注册和局部注册

Vue组件的全局注册和局部注册vue的全局组件全局组件就是所有的vue实例中都可以使用注册全局组件方法：可以使用Vue.extend()函数，也可以不使用，就直接使用Vue.component()来创建一个Vue 的全局组件Vue.component('component-a',{ // 注意这里的data必须是一个function data(){ return { msg:'你好' } },
复制链接

扫一扫

专栏目录