Vue-组件基础_vue中的 dl dt-CSDN博客

本文链接：https://blog.csdn.net/Zzzzsg_/article/details/90614114

本文围绕前端Vue组件展开，介绍了组件化这一流行的提升可复用性的方法，阐述了组件的基础概念，包括其是html、css等的聚合体，类似标签且至少有模板。还提及全局和局部组件注册、template组件规则，以及组件使用规则和嵌套问题。

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

组件

组件化

组件化是当今最为流行的一种可复用性增加的方法，随着当今前端开发的复杂度更加，这个组件化变得越来越流行

组件的基础

组件是一个具备html css img js …等的一个聚合体
组件的表现形式就类似一个标签
组件至少得有模板

全局组件的注册：

//html部分：
<div id="app">
    <Hello></Hello>
</div>

//js部分：

方法1：

//1. 组件的配置项
const Hello = Vue.extend({
  template: '<div> Hello component!!! </div>'
})

//2. 组件的注册
Vue.component( 'Hello', Hello )

//3. 组件的使用
new Vue({
  el: '#app'
})

方法2：

//2. 组件的注册
Vue.component( 'Hello', {
   template: '<div> Hello component!!! </div>'
})

//3. 组件的使用
new Vue({
  el: '#app'
})

局部组件注册：

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

new Vue({
  el:'#app',
  components: {
    'Hello':{
      template:`<h3>组件的局部注册</h3>`
    }
  }
})

tempalte组件

<div id="app">
    <Hello></Hello>
</div>
<template id="hello">
  <div>
    <h3> hello 预祝端午节happy </h3>
  </div>
</template>

 new Vue({
  el: '#app',
  components: {
    'Hello': {//html中模板标签名
      template: '#hello'//html中template标签的id名
    }
  }
})

template的唯一根元素

tempalte里面必须要有一个最大的标签包裹里面的标签

<div id="app">
  <Hello></Hello>
</div>
<template id="hello">
  <div> //tempalte里面必须要有一个最大的标签包裹里面的标签
    <div> 
      <h3> hello 预祝端午节happy </h3>
    </div>
    <div>
      <h3> hello 预祝端午节happy </h3>
    </div>
  </div>
</template>
------------html---------------
//错误代码

<div id="app">
  <Hello></Hello>
</div>
<template id="hello">
  <div> 
    <h3> hello 预祝端午节happy,开心 </h3>
  </div>
  <div>
    <h3> hello 预祝端午节happy </h3>
  </div>
</template>

new Vue({
  el: '#app',
  components: {
    'Hello': {
      template: '#hello'
    }
  }
})

组件的使用规则

比如特殊的一些标签： ul li、ol li、table tr td、dl dt dd、select option …这类型标签，是规定了它们的直接子元素，当我们将组件写入这类型标签的时候，就会发现有问题
解决：在直接子元素身上，通过 is 属性来绑定一个组件

正确的：
<div id="app">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr is = "Hello"></tr>
  </table>
</div>
<template id="hello">//解决方法
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>  
</template>

--------------------------------
错误的：
<div id="app">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <Hello></Hello>//这里是错误的
  </table>
</div>
<template id="hello">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</template>

new Vue({
  el: '#app',
  components: {
    'Hello': {
      template: '#hello'
    }
  }
}

要将子组件的组件名写在父组件的template中

<div id="app">
  <Father></Father>
</div>
<template id="father">
  <div>
    <h3>father</h3>
    <hr>
    <Son></Son>
  </div>
</template>
<template id="son">
    <h3>son</h3>
</template>

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

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

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

组件的嵌套–局部

 <div id="app">
    <Father></Father>
  </div>
  <template id="father">
    <div>
      <h3>  father </h3>
      <hr>
      <Son></Son>
    </div>
  </template>
  <template id="son">
    <h3> son </h3>
  </template>

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