1、组件的定义
一般将 Vue 组件定义在一个单独的 .vue 文件中，称做单文件组件；当然也可以将组件直接定义在js文件中，如下js代码，定义一个组件BlogPost，通过props定义对外暴露属性title，父组件传递title，子组件根据title渲染html内容。
export default {
props: ['title'],
template: `
<div class="blog-post">
<h4>{
{ title }}</h4>
</div>`
}2、组件的使用
首先需要引用组件，语法格式import BlogPost from './BlogPost.js'，然后在vue应用对象中注册组件，在components区域注册即可，最后在DOM元素内部使用标签格式，如代码<blog-post title="My jouney with Vue"></blog-post>应用子组件，并传递title属性给子组件渲染。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<blog-post title="My jouney with Vue"></blog-post>
</div>
<script type="module">
import BlogPost from './BlogPost.js'
const { createApp } = Vue;
createApp({
components: {
BlogPost
},
}).mount('#app');
</script>3、组件的重复应用
可以使用v-for语法循环创建子组件，如代码所示：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<blog-post v-for="post in posts" :key="post.id" :title="post.title"></blog-post>
</div>
<script type="module">
import BlogPost from './BlogPost.js'
const { createApp } = Vue;
createApp({
data() {
return {
posts: [
{ id: 1, title: 'My jounery with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
},
components: {
BlogPost
}
}).mount('#app');
</script>4、给组件传递事件
组件中模板声明一个按钮，并使用@click绑定点击事件，使用$emit抛出一个事件名为enlarge-text，并通过emits定义对外抛出的事件名称enlarge-text，定义如下代码所示：
export default {
props: ['title'],
emits: ['enlarge-text'],
template: `
<div class="blog-post">
<h4>{
{ title }}</h4>
<button @click="$emit('enlarge-text')">Enlarge text</button>
</div>`
}应用组件，应用中定义字体大小属性postFontSize，在组件blog-post应用的代码处定义事件@enlarge-text="postFontSize+=0.1"，点击后触发字体+0.1：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<div :style="{ fontSize: postFontSize + 'em' }">
<blog-post v-for="post in posts" :key="post.id" :title="post.title" @enlarge-text="postFontSize+=0.1"></blog-post>
</div>
</div>
<script type="module">
import BlogPost from './BlogPost.js'
const { createApp } = Vue;
createApp({
data() {
return {
posts: [
{ id: 1, title: 'My jounery with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
],
postFontSize:1
}
},
components: {
BlogPost
},
mounted() {
}
}).mount('#app');
</script>5、插槽的应用
在组件中定义一个插槽，模板中语法<slot/>，
export default {
template: `
<div class="alert-box">
<strong>This is an Error for Demo Purpose</strong>
<slot/>
</div>`
}在vue应用中给插槽传递html内容，alert-box元素中的内容“Something bad happened.”将传递给组件的插槽：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<alert-box>
Something bad happened.
</alert-box>
<table>
<tr>
<td>123</td>
<td>456</td>
</tr>
<tr is="vue:alert-box"></tr>
</table>
</div>
<script type="module">
import AlertBox from './AlertBox.js'
const { createApp } = Vue;
createApp({
data() {
return {
}
},
components: {
AlertBox
}
}).mount('#app');
</script> 
