vue3.x 组件基础(快速入门)

组件

我认为组件是vue强大的地方之一

官方文档：组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

在 Vue 中，组件本质上是一个具有预定义选项的实例。
组件可以扩展 HTML 元素，封装可重用的代码。
使用组件系统，可以让前端工程变成模块化开发。就像上面的图一样，整个页面可以由多个组件拼装而成。

简单注册组件:

<div id="app">
  <kiddy></kiddy>
</div>

<script>

    const app = Vue.createApp({});

    //注册组件
   app.component('kiddy',{
      template: '<h1>你好啊</h1>'
    })

    app.mount('#app');
</script>

用component注册组件。其中的两个参数：

• 第一个参数为组件名，如'kiddy'，也就是映射到自定义标签的名字。
• 第二个参数为template，也就是模板。将自定义标签的内容替换为模板中的内容。

组件的复用

组件是可以执行任意多次的：

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

全局组件与局部组件

使用app.component注册的组件，即跟上面的例子一样

const app = Vue.createApp({});

  //注册组件
 app.component('kiddy',{
    template: '<h1>你好啊</h1>'
  })

 app.mount('#app');

而局部组件则是通过一个普通的 JavaScript 对象来定义组件

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

当需要使用到这些组件时，再去实例中注册

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

使用局部组件的好处:

按照官方文档的说法:全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用其中一个组件了，它仍然会被包含在最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

prop

首先了解组件的作用域是孤立的。但是往往很多时候需要将数据从父组件传递给子组件。这时候就需要用到props

props:是可以在组件上注册的一些自定义 attribute，是子组件访问父组件数据的唯一接口。

用法：

插槽基础

作用：在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容。 （对组件定制化处理）

用法：

如图所示：插槽即为<slot></slot>,当用插槽渲染DOM时会将<slot></slot>替换为Add todo。从而达到对组件定制化处理的作用。

具名插槽

在一个组件里有时候可能需要使用多个插槽

这时候可以给插槽添加name属性以至于达到区分的效果，就是给插槽取个名字。
子组件：

<template>
    <div>
        <div class="header">
            <h1>我是页头标题</h1>
            <div>
                <slot name="header"></slot>
            </div>
        </div>
        <div class="footer">
            <h1>我是页尾标题</h1>
            <div>
                <slot name="footer"></slot>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        name: "child1"
    }
</script>
 
<style scoped>
 
</style>

父组件向具名插槽提供内容的时候，我们可以在一个<template> 元素上使用 v-slot指令，并以 v-slot 的参数的形式提供其名称：

<template>
<div>
    <div>slot内容分发</div>
    <child1>
        <template slot="header">
            <p>我是页头的具体内容</p>
        </template>
        <template slot="footer">
            <p>我是页尾的具体内容</p>
        </template>
    </child1>
</div>
</template>
 
<script>
    import child1 from "./child1.vue";
 
    export default {
        name: "father1",
        components: {
            child1
        }
    }
</script>
 
<style scoped>
 
</style>