vue-组件

最新推荐文章于 2023-06-12 09:56:25 发布

lt要努力

最新推荐文章于 2023-06-12 09:56:25 发布

阅读量72

点赞数

分类专栏： Vue 文章标签： vue局部注册 vue全局注册

本文链接：https://blog.csdn.net/louting249/article/details/103099508

版权

Vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

前端组件化发展历史

前后端耦合
  前后端不分离项目
     找后台搭建项目开发环境
     寻找项目目录中的静态资源目录
        js
        img
        css
     同步修改css
  前后端分离
    前端团队合作项目的出现
       组件化为了解决多人协作冲突问题
       复用

组件的概念

组件是一个html 、 css 、js 、img 等的一个聚合体

Vue中的组件属于扩展性功能

通过 Vue.extend() 来扩展的

ƒ Vue (options) {
    if (!(this instanceof Vue)
       ) {
        warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
}
ƒ VueComponent (options) {
    this._init(options);
}

VueComponet这个构造函数我们不进行new实例化，我们希望组件是以标签化的形式展示

<Hello/> -->  <div></div>
<Banner></Banner>

组件注册

全局注册   Vue.component( 组件名，组件的选项 )
局部注册   components选项

全局注册

<body>
  <div id="app">
    <Hello></Hello>
    <head-title></head-title>
    <Hello/>
  </div>

  <div id="root">
    <Hello></Hello>
  </div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  /* 它是组件的选项   options */
  var Hello = Vue.extend({
    template: '<div> hello 组件 </div>',//定义一个组件的模板
  })

  /* 组件的全局注册 */

  // Vue.component( 组件名，组件的选项 )
  /* 
    组件的命名： 
      1. 大驼峰命名法： Hello   HeadTitle
      2. 小写加 - ：  head-title

    备注： 如果js中定义的是大驼峰，那么html结构中要使用小写带-
  */
  Vue.component('Hello',Hello )
  Vue.component('HeadTitle',Hello)

  new Vue({ // 这个是根实例组件，它是最大的组件
    el: '#app'
  })

  new Vue({
    el: '#root'
  })

</script>

局部注册

<body>
  <div id="app">
    <Hello></Hello>
  </div>

  <div id="root">
    <Hello/>
  </div>

</body>
<script src="../../../lib/vue.js"></script>
<script>
  var Hello = Vue.extend({
    template: '<div> 晚上嗨起来 </div>'
  })

  new Vue({
    el: '#app',
    /* 局部注册 - components选项 */
    components: {
      // 组件名: 组件的选项
      'Hello': Hello
    }
  })

  new Vue({
    el: '#root'
  })

</script>

局部注册组件components选项简写

<body>
  <div id="app">
    <Hello></Hello>
  </div>

  <div id="root">
    <Hello/>
  </div>

</body>
<script src="../../../lib/vue.js"></script>
<script>

  new Vue({
    el: '#app',
    /* 局部注册 - components选项 */
    components: {
      // 组件名: 组件的选项
      'Hello': {
        template: '<div> 晚上嗨起来 </div>'
      }
    }
  })

  new Vue({
    el: '#root'
  })

</script>

lt要努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-组件

前端组件化发展历史前后端耦合前后端不分离项目找后台搭建项目开发环境寻找项目目录中的静态资源目录 js img css 同步修改css 前后端分离前端团队合作项目的出现组件化为了解决多人协作冲突问题复用组件的概念组件是一个html 、 css 、js 、img...
复制链接

扫一扫