1、组件（Component） 介绍
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码，可以帮助你将用户界面拆分成独立和可复用的部分。
2、定义一个组件
(1)、单文件组件
当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 文件中，这被叫做单文件组件 (简称 SFC)：
(2)、Vue 特定选项 JavaScript 对象
不使用构建步骤（如 webpack 或 Vite）的情况下，使用 Vue 3 的组合式 API 定义一个 Vue 组件。这种定义方式通常用于直接在浏览器中通过 标签引入 Vue.js 库的场景:
以下是代码的详细解释：
导入 函数：
这行代码从 Vue 库中导入了 函数。 是一个用于创建响应式引用的函数，它接受一个初始值，并返回一个响应式的对象。
定义组件对象：
这是一个 Vue 组件的 JavaScript 对象定义。它使用了 Vue 3 推荐的组合式 API。
函数：
函数是组合式 API 的入口点。在这里，我们使用 创建了一个名为 的响应式引用，并将其初始值设置为 。 函数返回一个对象，其中包含了我们想要在模板中使用的响应式数据。在这个例子中，我们返回了 。
模板：
组件的 属性定义了组件的 HTML 模板。在这个模板中，我们有一个 元素，当它被点击时，会触发 操作。这表示 的值将增加 。模板中的 是一个插值表达式，它将显示 的当前值。
内联模板的注释：
这一行被注释掉了，但它说明了另一种定义模板的方法。你可以通过指定一个已经在 DOM 中存在的元素的 ID 来使用内联模板。
3、使用组件
要使用一个子组件，我们需要在父组件中导入它。假设我们把计数器组件放在了一个叫做 的文件中，这个组件将会以默认导出的形式被暴露给外部。
ButtonCounter.vue 组件内容如下：
使用方法如下：
- 通过 ，导入的组件都在模板中直接可用。
- 组件可以被重用任意多次
- 每当你使用一个组件，就创建了一个新的实例
- 在单文件组件中，推荐为子组件使用 的标签名，以此来和原生的 HTML 元素作区分。虽然原生 HTML 标签名是不区分大小写的，但 Vue 单文件组件是可以在编译中区分大小写的。
4、子组件与父组件通讯 props
（1） 、defineProps()
在 Vue.js 中， 是一种机制，允许父组件向子组件传递数据。 是子组件声明的可接收的属性，这些属性由父组件提供，子组件可以通过 访问这些传递过来的值。
- 是 中的一个宏，用于定义组件的 。它接受一个字符串数组，数组中的每个字符串都是一个 的名称。
子组件中 使用 defineProps 声明 props 属性：
在这个子组件中，我们使用 函数来声明 。这个函数是 语法的一部分，用于定义组件的 。
父组件中 传参：
在这个父组件中，我们导入了子组件，并使用 函数创建了一个响应式的 变量。然后，我们通过 前缀将 作为 传递给子组件。
效果如下：
（2） 、defineEmits()
在 Vue 3 中， 是一个用于在组件的 函数中定义 emits 选项的宏。它允许你指定可以从组件触发的事件及其相应的参数。
定义 emits 选项： 在 中，使用 来定义组件可以触发的事件。
父组件中处理子组件事件：
实现效果如下，当点击按钮时，触发事件：
注意事项
- 只能在 中使用。
- 定义的事件名应与模板中使用的 或 指令的事件名一致。
- 使用 定义的事件可以在模板中通过 或 指令监听，并在父组件中处理。
（3)、defineModel()
这个宏可以用来声明一个双向绑定 prop，通过父组件的 来使用。
在底层，这个宏声明了一个 model prop 和一个相应的值更新事件。
- 如果第一个参数是一个字符串字面量，它将被用作 prop 名称
- 否则，prop 名称将默认为
在这两种情况下，都可以再传递一个额外的对象，它可以包含 prop 的选项和 model ref 的值转换选项。
以下是使用 演示子组件和父组件的使用示例：
首先，创建一个子组件 ：
这里使用了 宏来定义两个模型， 和 。这些模型在内部创建了对应的 和 事件，用于实现双向绑定。 是一个字符串类型的 ，默认值为空字符串， 是一个数字类型的 ，默认值为 0。
- 是 Vue 3 中的一个 API，用于在 中定义具有双向绑定能力的 。
- 指令用于创建表单输入元素和应用状态之间的双向绑定。
- 指令用于监听点击事件，并在事件发生时执行指定的函数。
然后，创建一个父组件：
- 和 是 指令的自定义版本，用于创建子组件的 和 属性与父组件的 和 数据的双向绑定。这意味着当子组件更改这些值时，父组件的相应数据也会更新，反之亦然。
- 这种双向绑定是通过子组件内部使用 或 和 实现的。子组件需要触发相应的更新事件（如 和 ），以便父组件可以响应这些变化。
- 由于 语法的简洁性，父组件中不需要 ，也不需要显式定义 函数。
实现效果如下：
当在子组件中输入 或者点击按钮事件，父组件都会同步更新。
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/23025.html