组件基础

组件基础免费看

11-11侠课岛    新上线 基础入门       

前端/前端/Vue入门教程 18     0     129

组件基础

本节我们来学习如何使用组件。组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 js 特性进行了扩展的原生 HTML 元素。

使用组件的好处:

  • 组件是可以复用性的。
  • 易于维护。
  • 有封装性,易于使用。
  • 大型项目中降低组件之间重复性。

组件的注册

组件注册就是利用 component() 方法,先传入一个自定义组件的名字,然后传入这个组件的配置,语法如下所示:

Vue.component(tagName, options)
  • tagName:组件名。
  • options :配置选项。

注册好后,可以通过组件名来使用组件,例如:

<tagName></tagName>

组件的使用

例如下面是一个 Vue 组件的示例:

// 创建一个Vue 应用
const app = Vue.createApp({})

// 定义一个名为button-counter的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">你已点击按钮 {{ count }} 次</button>`
})

上述代码中的 button-counter 就是组件的名称。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用。

HTML代码:

<div id="components-demo">
  <button-counter></button-counter>
</div>

JavaScript代码:

// 创建一个Vue 应用
const app = Vue.createApp({})

// 定义一个名为button-counter的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">你已点击按钮 {{ count }} 次</button>`
})

app.mount('#app')

演示效果:

因为组件是可复用的组件实例,所以它们与 new Vue 接收相同的选项,例如 datacomputedwatchmethods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

组件的复用

组件是可复用的,例如我们可以将上述示例中创建的组件进行任意次数的复用:

<div id="app">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

演示效果:

当我们点击按钮时,每个组件都会各自独立维护它的 count,也就是说它们是分开计数的。因为每用一次组件,就会有一个它的新实例被创建。

组件的组织

在页面中,我们通常会以嵌套的组件树的形式来组织组件,例如可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。前面我们用到的组件为全局组件,除此之外,还有一种组件的注册类型,即局部注册。

我们现在用到的组件都只是通过 component 全局注册的:

const app = Vue.createApp({})

app.component('my-component-name', {
  // ... 选项 ...
})

全局注册的组件可以在随后创建的 app 实例模板中使用,也包括根实例组件树中的所有子组件的模板中。

通过Prop向子组件传递数据

Vue 组件可以使用 props 属性来声明一个自己的属性,然后父组件就可以往里面传递数据。简单来说就是组件的数据传递。

示例:

例如我们创建一个组件

const app = Vue.createApp({})

app.component('blog-post', {
  props: ['title'],
  template: `<h4>{{ title }}</h4>`
})

app.mount('#app')

一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop

prop 被注册好之后,我们就可以把数据作为一个自定义属性传递进来:

<div id="app">
  <blog-post title="第一个标题"></blog-post>
  <blog-post title="第二个标题"></blog-post>
  <blog-post title="第三个标题"></blog-post>
</div>

演示效果:

除了上面这种使用方式,我们还可以使用 v-bind 指令动态传递 prop。这在一开始不清楚要渲染的具体内容,是非常有用的。

<div id="app">
    <blog-post v-for="post in posts" :key="post.id" :title="post.title"></blog-post>
</div>
const App = {
  data() {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }
  }
}

const app = Vue.createApp({})

app.component('blog-post', {
  props: ['title'],
  template: `<h4>{{ title }}</h4>`
})

app.mount('#app')

通过Slots分发内容

和 HTML 元素一样,我们经常需要向一个组件传递内容,例如:

<div id="app">
    <alert-box>
      我最喜欢的水果是
    </alert-box>
</div>

我们可以通过 Vue 中自定义的 <slot> 元素来实现:

const app = Vue.createApp({})
app.component('alert-box', {
  template: `
    <div>
      <slot></slot>
      <strong>西瓜!</strong>
    </div>
  `
})
app.mount('#app')

像上述代码,只需将 slot 添加到我们想要的位置即可。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

18

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?