0
点赞
收藏
分享

微信扫一扫

01 怎么理解Vue中的组件?

佳简诚锄 2021-09-30 阅读 101

Q1:什么是组件?

组件是可复用的Vue实例,且带有一个名字(内心os:不就是可重复使用的Vue实例么...)

Q2: 为什么要使用组件?

为了提高代码的复用性 (内心os: 这应该和函数封装是一个道理吧....)

Vue组件示例

  <!-- html中的内容,把 my-component 这个组件作为自定义元素来使用-->
  <div id="component-demo">
      <my-component></my-component>
  </div>
  <script>
// 定义一个名为 my-component 的新组件
     Vue.component('my-component',{
      data: function(){
        return {
          count: 0
        }
      },
      template: ' <button v-on:click="count++">你点击了{{count}}次</button>'
    })
// 我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:
    new Vue({el:'#component-demo'})
  </script>

总结:

  1. 注册一个自定义的组件
  2. 通过 new Vue创建 Vue 实例,并将实例挂载到DOM上
  3. 在对应的 html 中将自定义的组件作为自定义元素来使用

Q3: 组件只有注册了才能被Vue识别,那组件注册的类型有哪些呢?

有两种组件注册类型:局部注册和全局注册

  • 全局注册:全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。
<div id="app">
    <my-comp></my-comp>
</div>

 Vue.component('my-comp',{
       template:'<h3>我是新出炉的组件</h3>'
    })

 new Vue({
      el: "#app",
      data: {

      }
    })
  • 局部注册:局部注册的组件在其子组件中不可用
  <div id="app">
    <my-comp></my-comp>
  </div>

  new Vue({
    el: "#app",
    components:{
        'my-comp':{template:'<h3>我是新出炉的组件</h3>'}
    },
    data: {

    }
  })

Q4: 组件的名字有什么讲究么?

答案是当然有了

Vue.component('my-component-name', { /* ... */ })
  • 在注册一个组件的时候,我们始终需要给它一个名字,该组件名就是 Vue.component 的第一个参数
  • 定义组件名的方式有两种: kebab-case 和 PascalCase
    • 当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 <my-component-name>。
    • 当使用 PascalCase (驼峰式命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

组件使用的奇淫技巧

  1. 推荐使用小写字母加­进行命名(必须) child, my­componnet命名组件
  2. template中的内容必须被一个DOM元素包括 ,也可以嵌套
  3. 在组件的定义中,除了template之外的其他选项—data,computed,methods
  4. data必须是一个方法
举报

相关推荐

0 条评论