优秀的编程知识分享平台

网站首页 > 技术文章 正文

【Vue3】第四节.Vue3核心概念: 组件

nanyue 2025-01-11 15:53:57 技术文章 5 ℃

组件概述

在 Vue 3 中，组件是可重用的 UI 构件，可以通过组合来构建复杂的用户界面。组件允许开发者将复杂的界面拆分为更小、更易管理的部分。

组件的创建与使用

  1. 创建组件：
  • 使用对象字面量定义组件。
  • 使用 Vue.createApp() 创建应用实例，并注册组件。
  1. Props 和 Emits：
  • Props：父组件向子组件传递数据。
  • Emits：子组件向父组件发送事件。
  1. 组合式 API：
  • 使用 setup() 函数进行逻辑处理。
  • 使用 ref 和 reactive 管理响应式数据。

示例代码（Test.html）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue3 -->
    <script src="https://unpkg.com/vue@3"></script>
    <title>组件的概念</title>
</head>

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

    <script>
        // 定义子组件
        const Hello = {
            props:['message'],
            emits:['updateMessage'],
            setup(props,{emit}){
                // 定义handleClick函数
                const handleClick = () => {
                    emit('updateMessage','Message from child')
                };
                // 返回handleClick函数
                return {
                    handleClick
                };
            },
            // 定义模板
            template: `
                <dive>
                    <p>{{ message }}</p>
                    <button @click="handleClick">点击，给父组件传递消息</button>
                </div>
            `
        };
        // 定义父组件 App.
        const App = {
            setup(){
                // 定义message变量
                const message = Vue.ref('Hello from parent');
                const handleEvent = (newMessage) => {
                    message.value = newMessage;
                };
                return {
                    // 返回message变量
                    message,
                    // 返回handleEvent函数
                    handleEvent
                };
            },
            // 定义组件
            components: {
                Hello
            },
            // 定义模板
            template: `
                <div>
                    <p>子组件传过来的消息：{{ message }}</p>
                    <Hello :message="message" @updateMessage="handleEvent" />
                </div>
            `
        };
        // 创建应用实例并挂载
        const app = Vue.createApp(App);
        // 挂载到id为app的元素上
        app.mount('#app');

    </script>
</body>

</html>

代码解释

  1. 引入 Vue 3：
  • 通过 CDN 引入 Vue 3 的完整版。
  1. 定义子组件 Hello：
  • Props：接收 message 属性。
  • Emits：定义 updateMessage 事件。
  • Setup 函数：定义 handleClick 方法，触发事件。
  1. 定义父组件 App：
  • Setup 函数：使用 Vue.ref 定义响应式数据 message，定义 handleEvent 方法处理子组件事件。
  • Template：显示父组件的消息，并包含子组件 Hello。
  1. 挂载应用：
  • 使用 Vue.createApp(App) 创建应用实例，并挂载到 #app 容器。

运行步骤

  1. 将上述代码保存为一个 .html 文件。
  2. 用浏览器打开该文件，查看效果。
  3. 点击子组件中的按钮，观察父组件消息的变化。

Tags：

猜你喜欢

最近发表
标签列表