组件基础
阅读: 4482 评论：0Vue的两个设计思想：渐进式和组件化
渐进式：前面的章节算是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实例，所以它们与根实例接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。
在Vue2.x时代，根实例可以接收el选项，组件不行。但现在大家都不用el了。
组件的复用
可以将组件进行任意次数的复用：
<div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div>
注意当点击按钮时，每个组件都会各自维护它独立拥有的 count。因为组件的data选项是个函数，天然具有JS语言的作用域。
组件的组织
通常一个应用会以一棵嵌套的组件树的形式来组织：
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在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>