发出 Vue 3 脚本设置道具 - JavaScript

在 Vue 3 中，我们可以使用组件 props 来传递数据。组件 props 是一种接受从父组件传递的数据的机制。在本篇文章中，我们将讨论如何在 Vue 3 中发出脚本设置道具。

设定 props

要创建一个 props 对象，你需要在组件中定义一个 props 函数。在 props 函数中，你需要指定需要的 props，以及这些 props 的验证规则。下面是一个简单的例子：

const App = {
  props: {
    userId: {
      type: Number,
      required: true
    },
    username: {
      type: String,
      default: 'user'
    }
  },
  template: `
    <div>
      User ID: {{ userId }}
      Username: {{ username }}
    </div>
  `
}

在上面的代码中，我们定义了一个 props 对象，它有两个属性：userId 和 username。

通过 props 向组件传递数据

如果你想将数据传递给组件作为 props，你需要使用组件标签的属性来传递数据。下面是一个例子：

<app :user-id="1" username="John"></app>

在上面的代码中，我们使用了 app 组件，并向它传递了 userId 和 username 作为 props。

在组件中使用 props

在组件中使用 props 就像使用普通的 JavaScript 变量一样简单。你可以在组件模板中直接引用 props 中的属性。下面是一个例子：

const App = {
  props: {
    userId: {
      type: Number,
      required: true
    },
    username: {
      type: String,
      default: 'user'
    }
  },
  template: `
    <div>
      User ID: {{ userId }}
      Username: {{ username }}
    </div>
  `
}

小结

在本篇文章中，我们讨论了如何在 Vue 3 中发出脚本设置道具。组件 props 是一种接受从父组件传递的数据的机制，在使用时需要定义 props 函数来指定需要的 props，以及这些 props 的验证规则。 通过将数据传递到组件标记的属性，我们可以将数据传递给组件作为 props，并在组件模板中轻松引用这些 props。