Vue3入门：安装、组件与通信-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_67528197/article/details/133472286

1. 安装 Vue3
可以通过npm或者yarn安装Vue3:

# 使用npm
npm install vue@next

# 使用yarn
yarn add vue@next

2. 创建Vue应用
在HTML文件中引入 Vue3 的UMD版本，然后创建一个Vue应用：

<!DOCTYPE html>
<html>
<head>
    <title>Vue3 Demo</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'Hello, Vue3!'
                }
            }
        })
        
        app.mount('#app')
    </script>
</body>
</html>

3. 使用组件
Vue3中可以使用Composition API来定义组件，下面是一个简单的组件示例：

<template>
    <div>
        <h2>{{ title }}</h2>
        <button @click="increaseCount">点击增加</button>
        <p>当前计数：{{ count }}</p>
    </div>
</template>

<script>
    import { ref } from 'vue'

    export default {
        name: 'Counter',
        setup() {
            const title = '计数器'
            const count = ref(0)

            function increaseCount() {
                count.value++
            }

            return {
                title,
                count,
                increaseCount
            }
        }
    }
</script>

4. 组件间通信
Vue3中可以使用provide和inject来进行组件间的通信，比如可以在父组件中provide一个值，然后在子组件中inject来使用这个值：

<!-- ParentComponent.vue -->
<template>
    <div>
        <ChildComponent />
    </div>
</template>

<script>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
    name: 'ParentComponent',
    setup() {
        provide('message', 'Hello from parent')
    },
    components: {
        ChildComponent
    }
}
</script>


<!-- ChildComponent.vue -->
<template>
    <div>
        <p>{{ message }}</p>
    </div>
</template>

<script>
import { inject } from 'vue'

export default {
    name: 'ChildComponent',
    setup() {
        const message = inject('message', 'Default message')

        return {
            message
        }
    }
}
</script>