组件化-优快云博客

本文链接：https://blog.youkuaiyun.com/foreverlailai/article/details/90605992

本文介绍了Vue.js组件的相关知识。通过Vue.extend()扩展组件，其options参数与Vue(options)类似。组件需注册才能使用，有全局和局部两种注册形式，且必须先注册后使用。组件模板用template配置项表示，使用时要遵循特定规则，还提到了组件嵌套。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js通过Vue.extend() 方法来扩展组件的使用
2. Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的
3. new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，我们称之为 ‘根实例组件’ ，叫 ‘Root’ 组件
4. Vue中组件的表现形式是类似于标签的，要想像标签一样使用，就必须得符合 h5 的规则，也就是必须要进行组件的注册
5. 组件的注册有两种形式
全局注册
格式： Vue.component(组件的名称，组件的配置项)
组件的命名规则
举例：
1. Father Hello
2. my-button
局部注册
格式：
写在组件内注册
举例：
new Vue({
componens: {
组件名: 组件配置项
}
})
6. 组件必须先注册在使用

			<script>
			    new Vue({
			    el: '#app'
			  })
			
			  // new Vue({
			    // el: '#root'
			  // })
			</script>

7.组件中的模板需要使用一个叫做template的配置项表示

<body>
  <div id="app">
    <Hello></Hello>
  </div>
  <template id="hello">
    <div>
      <h3> hello 预祝端午节happy </h3>
    </div>
  </template>
</body>
  <script>
   new Vue({
    el: '#app',
    components: {
      'Hello': {
        template: '#hello'
      }
    }
  })
   // new Vue({
  //   el: '#root'
  // })
  </script>
</html>

组件的配置项可以简写，不需要使用 Vue.extend(options),可以直接将options写在组件的注册中

9.template组件中有且仅有一个根元素

10
组件使用时有规则的：
比如特殊的一些标签： ul li ol li table tr td dl dt dd select option …这类型标签，是规定了它们的直接子元素，当我们将组件写入这类型标签的时候，就会发现有问题

        解决： 在直接子元素身上，通过 is 属性来 绑定  一个组件

        举例：` <table>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <!-- <Hello></Hello>  这么写有问题-->
          <tr is = "Hello"></tr>
        </table>`

11.组件嵌套
全局注册： 以下举例

 Vue.component('Father',{
    template: '#father'
  })
  Vue.component('Son',{
    template: '#son'
  })

  new Vue({
    el: '#app',
  })

  局部注册
new Vue({
    el: '#app',
    components: {
      'Father': {
        template: '#father',
        components: {
          'Son': {
            template: '#son'
          }
        }
      }
    }
  })