组件基础

阅读: 4831     评论:0

Vue的两个设计思想:渐进式和组件化

渐进式:前面的章节算是JS层面最基础的Vue运用,而本节开始的模板式组件则是进一步抽象,等到使用CLI脚手架,使用单文件组件进行工程化开发时则是更庞大深入的运用。

组件化:将页面分成多个组件,进行模块化开发。简单应用时将每个组件构造成一个Vue实例,进一步使用则是构造成Vue单文件组件。始终保持组件的独立和可复用。

本节内容是组件的基础,主要是在HTML模板中利用组件,暂时不涉及单文件组件。

基本实例

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

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

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
})

组件是带有名称的可复用的Vue实例,在这个例子中是 <button-counter>

可以把组件作为一个根实例中的自定义HTML元素来使用

<div id="components-demo">
  <button-counter></button-counter>
</div>
app.mount('#components-demo')

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

在Vue2.x时代,根实例可以接收el选项,组件不行。但现在大家都不用el了。

组件的复用

可以将组件进行任意次数的复用:

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

注意当点击按钮时,每个组件都会各自维护它独立拥有的 count。因为组件的data选项是个函数,天然具有JS语言的作用域。

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织:

Component Tree

例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在HTML模板中使用,组件必须先注册,以便 Vue 能够识别。

有两种注册组件的方式:全局注册局部注册

前文中,我们的组件都是通过 component 方法进行全局注册的:

const app = Vue.createApp({})

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

全局注册的组件可以在应用中的任何组件的模板中使用。

通过 Prop 向子组件传递数据

为了保持组件的独立和可复用,Vue禁止了父子组件间的直接数据访问。

想要从父组件传递值给子组件,需要使用prop选项。Prop 是你可以在组件上注册的一些自定义属性。

比如,为了给博文组件传递一个标题,我们可以用 props 选项将其包含在该组件可接受的 prop 列表中:

const app = Vue.createApp({})

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

app.mount('#blog-post-demo')

当一个值从父组件传递给一个子组件的 prop 属性时,它就成为该子组件实例中的一个 属性。该 属性的值可以在子组件的模板中访问,就像任何其他属性一样。

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

<div id="blog-post-demo" class="demo">
  <blog-post title="My journey with Vue"></blog-post>
  <blog-post title="Blogging with Vue"></blog-post>
  <blog-post title="Why Vue is so fun"></blog-post>
</div>

上面的title是写死的,纯粹就是向子组件传递了一个字符串。

然而在一个典型的应用中,你可能在 data 里有一个博文的数组:

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)

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

app.mount('#blog-posts-demo')

并想要为每篇博文渲染一个组件:

<div id="blog-posts-demo">
  <blog-post
    v-for="post in posts"
    :key="post.id"
    :title="post.title"
  ></blog-post>
</div>

如上所示,你会发现我们可以使用 v-bind 来动态传递 prop。

监听子组件事件

上面是父亲向儿子传递数据,那么儿子要向父亲传递数据呢?

使用事件冒泡机制!

我们在开发 <blog-post> 组件时,它的一些功能可能需要与父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号,同时让页面的其它部分保持默认的字号。

在其父组件中,我们可以通过添加一个 postFontSize 变量来保存字号:

const App = {
  data() {
    return {
      posts: [
        /* ... */
      ],
      postFontSize: 1
    }
  }
}

它可以在模板中用来控制所有博文的字号:

<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      :key="post.id"
      :title="post.title"
    ></blog-post>
  </div>
</div>

现在我们在每篇博文正文之前添加一个按钮来放大字号:

app.component('blog-post', {
  props: ['title'],
  template: `
    <div class="blog-post">
      <h4>{{ title }}</h4>
      <button>
        Enlarge text
      </button>
    </div>
  `
})

问题是这个按钮暂时不会做任何事:

<button>
  Enlarge text
</button>

当点击这个按钮时,我们需要告诉父级组件放大所有博文的文本。

Vue组件实例提供了一个自定义事件的系统来解决这个问题。父级组件可以像处理原生 DOM 事件一样通过 v-on@ 监听子组件实例的任意事件:

<blog-post ... @enlarge-text="postFontSize += 0.1"></blog-post>

同时子组件可以通过调用内建的 $emit 方法,提供事件名称,来触发一个事件:

<button @click="$emit('enlargeText')">
  Enlarge text
</button>

通过 @enlarge-text="postFontSize += 0.1" 监听器,父级组件能够接收子组件冒泡上来的事件并更新 postFontSize 值。

我们可以在组件的 emits 选项中列出设定的所有事件

app.component('blog-post', {
  props: ['title'],
  emits: ['enlargeText']
})

这可以帮助我们检查和验证组件抛出的所有事件。

使用事件抛出一个值

事件不光能传递动作本身,也能传递值。也就是说子组件也是可以向父组件传递数据的。

有的时候用一个事件来抛出一个特定的值是非常有用的。

例如我们可能想让 <blog-post> 组件决定它的文本要放大多少。这时可以使用 $emit 的第二个参数来提供这个值:

<button @click="$emit('enlargeText', 0.1)">
  Enlarge text
</button>

然后当在父级组件监听这个事件的时候,我们可以通过 $event 访问到被抛出的这个值:

<blog-post ... @enlarge-text="postFontSize += $event"></blog-post>

或者,如果这个事件处理函数是一个方法:

<blog-post ... @enlarge-text="onEnlargeText"></blog-post>

那么这个值将会作为第一个参数传入这个方法:

methods: {
  onEnlargeText(enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

在组件上使用 v-model

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住:

<input v-model="searchText" />

其实就等价于:

<input :value="searchText" @input="searchText = $event.target.value" />

当用在组件上时,v-model 则会这样:

<custom-input
  :model-value="searchText"
  @update:model-value="searchText = $event"
></custom-input>

请注意,在这里使用的是 model-value,因为我们使用的是 DOM 模板中的 kebab-case。

为了让它正常工作,这个组件内的 <input> 必须:

  • 将其 value 属性绑定到一个名叫 modelValue 的 prop 上
  • 在其 input 事件被触发时,将新的值通过自定义的 update:modelValue 事件抛出

最终的代码是这样的:

app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
})

现在 v-model 就可以在这个组件上完美地工作起来了:

<custom-input v-model="searchText"></custom-input>

在该组件中实现 v-model 的另一种方法是使用 computed 属性的功能来定义 getter 和 setter。get 方法应返回 modelValue 属性,set 方法应该触发相应的事件。

app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input v-model="value">
  `,
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) { 
        this.$emit('update:modelValue', value)
      }
    }
  }
})

通过插槽分发内容

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

<alert-box>
  Something bad happened.
</alert-box>

仔细回想,前面我们使用自定义组件都是开标签直接跟着闭合标签,中间是没有内容的。而这里的alert-box中间却有一段文字。我们的需求是,将这段文字渲染到alert-box组件的模板中去。

这可以通过使用 Vue 的自定义 <slot> 元素来实现:

app.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

动态组件

有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里,或者页面顶部的导航栏。

我们可以通过 Vue 的 <component> 元素加一个特殊的 is 属性来实现:

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component :is="currentTabComponent"></component>

currentTabComponent 可以是:

  • 已注册组件的名字
  • 一个组件的选项对象

注意事项

HTML 的属性名不区分大小写,因此浏览器将所有大写字符解释为小写。这意味着当你在 DOM 模板中使用时,驼峰 prop 名称和 event 处理器参数需要使用它们的 kebab-cased (横线字符分隔) 等效值:

//  在JavaScript中的驼峰

app.component('blog-post', {
  props: ['postTitle'],
  template: `
    <h3>{{ postTitle }}</h3>
  `
})
<!-- 在HTML则是横线字符分割 -->

<blog-post post-title="hello!"></blog-post>

 表单输入绑定 注册组件 

评论总数: 0


点击登录后方可评论