1.简介
组件是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
2.一个简单的 Vue 组件的实例
<div id="app"> <list></list> </div> <script> // 创建一个Vue应用 const app = Vue.createApp({}) // 定义一个组件内容 app.component('list', { template: '<h1>我是自定义的组件！</h1>' }) app.mount('#app') </script>
接下来我们再注册一个 button-counter 组件，在每次点击后，计数器会加 1:
<div id="app"> <button-counter></button-counter> </div> <script> // 创建一个Vue应用 const app = Vue.createApp({}) // 定义一个组件内容 app.component('button-counter', { data() { return { count: 0 } }, template:` <button @click="count++"> 点了 {{ count }}次！ </button>` }) app.mount('#app') </script>
可以将组件进行任意次数的复用：
<div id="app"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div>
3.局部组件
全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加
例子：这个组件只能在这个实例中使用
<div id="app"> <imim-a></imim-a> </div> <script> var imimA = { template: '<h1>局部组件的例子</h1>' } const app = Vue.createApp({ components: { 'imim-a': imimA } }) app.mount('#app') </script>
4.Prop
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：
<div id="app"> <site-name title="Google"></site-name> <site-name title="Runoob"></site-name> <site-name title="Taobao"></site-name> </div> <script> const app = Vue.createApp({}) app.component('site-name', { props: ['title'], template: `<h1>{{ title }}</h1>` }) app.mount('#app') </script>
5.动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
<div id="app"> <site-info v-for="site in sites" :id="site.id" :title="site.title" ></site-info> </div> <script> const Site = { data() { return { sites: [ { id: 1, title: 'Google' }, { id: 2, title: 'Runoob' }, { id: 3, title: 'Taobao' } ] } } } const app = Vue.createApp(Site) app.component('site-info', { props: ['id','title'], template: `<h4>{{ id }} - {{ title }}</h4>` }) app.mount('#app') </script>
