vue3速览

在您的Vue.js 3应用中，createApp 是用于创建一个Vue应用实例的函数。您已经正确地引入了它并开始创建应用，但目前根组件内部是空的。下面我将为您展示一个更完整的例子，说明如何设置根组件的模板、数据、方法等选项，并挂载到DOM上。

import { createApp } from 'vue'

const app = createApp({
  // 根组件的模板可以使用template属性定义
  template: `
    <div>
      <h1>{{ message }}</h1>
      <button @click="reverseMessage">{{ buttonText }}</button>
    </div>
  `,
  
  // 数据属性定义在setup函数中，返回一个对象
  setup() {
    let message = 'Hello Vue 3!';
    let buttonText = 'Reverse Message';

    // 方法也定义在setup函数内
    const reverseMessage = () => {
      message = message.split('').reverse().join('');
      buttonText = message === 'Hello Vue 3!' ? 'Reverse Message' : 'Original';
    };

    // 返回一个包含要注入到模板中的属性和方法的对象
    return {
      message,
      buttonText,
      reverseMessage
    };
  }
})

// 挂载应用到DOM的一个元素上，例如ID为'app'的元素
app.mount('#app')

在这个示例中，我们定义了一个简单的Vue 3应用，其根组件有一个欢迎信息和一个按钮。点击按钮会触发reverseMessage方法，该方法反转消息文本，并改变按钮的文本以反映是否显示原始消息或已反转的消息。最后，我们使用app.mount('#app')将这个应用挂载到HTML中ID为app的元素上。

记得在您的HTML文件中包含一个挂载点：

<div id="app"></div>
• 1

并且确保在使用此代码之前已经通过CDN或构建工具引入了Vue 3。

当然可以，Vue 3 应用允许你向根组件传递props。这在创建可复用的组件或需要根据外部条件初始化组件状态时非常有用。不过，与Vue 2不同，在Vue 3中，你需要在创建应用实例之后，使用app.provide()来提供全局属性，或者在挂载时直接传递props给根组件。这里展示如何直接向根组件传递props：

首先，修改你的JavaScript代码以接收props：

import { createApp } from 'vue'

const app = createApp({
  // ...
  setup(props) {
    // 现在你可以在这个函数内通过props访问传入的参数
    console.log(props.initialMessage);
    
    // 假设我们使用props来初始化message
    let message = props.initialMessage;
    // ... 其他逻辑保持不变 ...
  },
  // ...
})

然后，在挂载应用到DOM时传递props：

app.mount('#app', { initialMessage: 'Hello from props!' });

在这个例子中，我们向根组件传递了一个名为initialMessage的prop，并在setup函数中通过props参数访问它。这样，你就可以根据传递的参数来初始化应用的状态或其他配置了。

请注意，这种方式适用于简单场景或快速原型开发。对于更复杂的应用，推荐使用Vue的依赖注入系统（provide/inject）或者利用路由参数、状态管理库（如Vuex）来传递和管理状态。