什么是组件

组件(Component)是 vue.js 中很强大的一个功能，可以将一些可重用的代码进行封装重用。所有的 Vue 组件同时也是 Vue 的实例，可以接受使用相同的选项对象和提供相同的生命周期钩子。
一句话概括：组件就是可以扩展 HTML 元素，封装可重用的 HTML 代码，可以将组件看作自定义的 HTML 元素。在 vue 项目中，所有 .vue 结尾的文件都是一个组件

定义组件

局部组件

引入组件后，需要在 components 对象里进行注册，注册后可以直接进行使用

创建 qf-button.vue 文件

<template>
    <div>
        <button>一个朴实无华的按钮</button>
    </div>
</template>

创建 learn-component.vue 文件并引入 qf_btn.vue 文件

<template>
    <div>
        <!-- 使用标签语法直接使用组件 -->
        <QfButton></QfButton>
    </div>
</template>
<script>
import QfButton from "./qf-button.vue";
export default {
    /**
     * 在components里注册组件
     * key 是 组件名 value 是对应的组件
     */
    components: {
        QfButton,
    },
};
</script>

全局组件

全局组件注册后，使用时不需要额外的引入可以直接使用

创建 qf-input.vue 文件

<template>
    <div>
        <input type="text" placeholder="一个普通的输入框" />
    </div>
</template>

在入口文件处引入

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import QfInput from "./qf-input.vue";

const app = createApp(App);
/**
 * 使用component方法注册全局组件，接收两个参数
 * 第一个参数 组件的名字
 * 第二个参数 组件的值
 */
app.component("qf-input", QfInput);
app.mount("#app");

组件传参

父传子

在父组件的子组件标签上定义属性，子组件使用 props 接收

父组件传入

<template>
    <div>
        <!-- 属性名 是对应的 参数名  -->
        <!-- 属性值 是对应的 参数值  -->
        <QfButton buttonName="按钮名字"></QfButton>
    </div>
</template>
<script>
import QfButton from "./qf-button.vue";
export default {
    components: {
        QfButton,
    },
};
</script>

子组件接收

<template>
    <div>
        <!-- 可以直接使用 -->
        <button>{{ buttonName }}</button>
    </div>
</template>

<script>
export default {
    // 子组件使用 props 接收

    /**
     * props 属性值 可以是一个数组
     * 数组里存放当前组件接收到的参数
     * 注意：props定义的参数名和父组件传入的参数名必须一致
     */
    // props: ["buttonName"],

    /**
     * props 属性值 可以是一个对象
     *
     * 对象的 key 是 当前组件接收的参数
     * 对象的 value 又是一个对象
     * 这种方式了解即可
     */
    props: {
        buttonName: {
            /** type 接收参数的类型 */
            type: String,
            /** required 参数是否必传 */
            required: false,
            /** 参数默认值 */
            default: "默认按钮名",
        },
    },
};
</script>

子传父

通过事件传递，子组件使用 $emit 传递一个事件给父组件。$ emit 第一个参数是事件名，第二个参数要传给父组件的参数。父组件在子组件标签上使用 @ 接收传过来的事件

功能: qf-input 每次输入的时候把输入的内容传给父组件

子组件

<template>
    <div>
        <input
            @input="inputChange"
            type="text"
            placeholder="一个普通的输入框"
        />
    </div>
</template>

<script>
export default {
    methods: {
        inputChange(event) {
            /**
             * 使用this.$emit方法, 把当前输入的信息传给父组件
             */
            /**
             * 第一个参数是抛出的事件名
             * 第二个参数是要传给组件的信息 第二个参数可以不传
             */
            this.$emit("componentChange", event.target.value);
        },
    },
};
</script>

父组件

<template>
    <!-- 
        使用 @ 接收 子组件抛出的事件, 并定义触发的函数
        inputChange 如果不写括号 会自动接收到传入的参数
    -->
    <qf-input @componentChange="inputChange"></qf-input>
    <!-- 如果inputChange 函数 带括号 需要使用$event 拿到传入的参数 -->
    <!-- <qf-input @componentChange="inputChange($event)"></qf-input> -->
</template>
<script>
import QfInput from "./qf-input.vue";
export default {
    components: {
        QfInput,
    },

    methods: {
        inputChange(msg) {
            console.log(msg);
        },
    },
};
</script>

祖孙传参

provide/inject

provide: 可以让我们指定想要提供给后代组件的数据或方法
inject: 在任何后代组件中接收想要添加在这个组件上的数据或方法, 不管组件嵌套多深都可以直接拿来用

创建子组件 child1.vue 创建孙组件 child2.vue 并按照等级依次引入

在最上级组件 (爷爷组件) 写入

<template>
    <div>
        <Child1></Child1>
    </div>
</template>
<script>
import Child1 from "./child1.vue";

export default {
    components: {
        Child1,
    },

    /**
     * 使用provide 统一下发值
     * provide 是一个函数 函数必须有返回值
     * 返回的值可以在任意子级组件接收
     */
    provide() {
        return {
            msg: "最上级组件传值",
            handle: this.handle,
        };
    },

    methods: {
        handle(msg) {
            console.log("触发接收？", msg);
        },
    },
};
</script>

孙组件接收(child2.vue)

<template>
    <div>孙组件 ---{{ msg }}</div>
    <button @click="handle('传入的')">+1</button>
</template>
<script>
export default {
    // 使用 inject 接收 上级组件统一下发的值
    inject: ["msg", "handle"],
};
</script>

provide/inject 使用场景:
- 国际化
- 主题色切换
- 祖孙传值

$attrs

多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个，比如父组件向孙子组件传递数据时 $attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this.$ attrs 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 v-bind="$attrs"

爷爷组件

<template>
    <div>
        <Child1 @handle2="handle" name="来自爷爷的问候"></Child1>
    </div>
</template>
<script>
import Child1 from "./child1.vue";

export default {
    components: {
        Child1,
    },

    methods: {
        handle(msg) {
            console.log("触发接收？", msg);
        },
    },
};
</script>

子组件

<template>
    <div>
        子组件
        <!-- 使用 v-bind="$attrs" 继续往下传-->
        <Child2 v-bind="$attrs"></Child2>
    </div>
</template>

<script>
import Child2 from "./child2.vue";
export default {
    components: {
        Child2,
    },
};
</script>

父组件

<template>
    <div>孙组件 ---{{ msg }}</div>
</template>
<script>
export default {
    /**
     * 超纲一点生命周期😄组件创建完成后调用
     */
    created() {
        /**
         * 使用 this.$attrs 获取上级组件往下抛的所有的值
         * 注意：这里传入的事件会在事件名前加上on，并且驼峰 如 爷爷组件传入的
         * @handle2 在这里变成了onHandle2
         */
        console.log(this.$attrs);
    },
};
</script>

兄弟传参

一般使用状态管理解决

event bus
- EventBus 是中央事件总线, 不管是父子组件, 兄弟组件, 跨层级组件等都可以使用它完成通信操作
- 在 Vue3 中, 由于 Vue2 中的全局事件总线 (Vue.prototype. $emit 和 Vue.prototype.$ on) 被移出, 我们需要是用其他方式来实现类似的功能
- 在 Vue3 中, 可以使用 mitt 这个第三方库来创建一个事件总线

安装

npm install mitt

使用 (在需要使用事件总线的地方导入和创建它)

import mitt from "mitt";
const eventBus = mitt();

发送事件 (要发送事件，你可以使用 eventBus.emit(eventName, payload) 方法)

eventBus.emit("eventName", payload);

监听事件

eventBus.on("eventName", (payload) => {
    // 处理事件的回调逻辑
});

取消监听

eventBus.off("eventName", handler);

vue 组件