14 Vue3中组件的props属性

概述

Let’s look at a simple HelloWorld single-file component. You can find this at ./src/components/HelloWorld.vue, generated automatically when you create a Vue project with Vite.

让我们来看一个简单的 HelloWorld 单文件组件。您可以在 ./src/components/HelloWorld.vue 中找到该组件,它是在您使用 Vite 创建 Vue 项目时自动生成的。

Note how the msg value is set in the props array and that it is interpolated as a value using {{ msg }}.

请注意 msg 值是如何在道具数组中设置的,以及它是如何使用 {{ msg }} 插值的。

The props property of a Vue component can be an array of strings or an object literal, each property field of which is a component’s prop definition.

Vue 组件的 props 属性可以是字符串数组或对象字面,其中的每个属性字段都是组件的 prop 定义。

When a value is defined in props, it is then accessible as an instance variable in the template section of the Vue component:

在道具中定义值后,就可以在 Vue 组件的模板部分将其作为实例变量访问:

<template>
  <div class="hello">
    <h1>{{ msg }}h1>
  div>
template>
<script>
export default {
  name: 'HelloWorld',
  props: ['msg']
}
script>

通过属性传递数据给组件

What follows is a demonstration of how to use the HelloWorld component in our Vue application.

下面将演示如何在 Vue 应用程序中使用 HelloWorld 组件。

First, we need to import HelloWorld in our App.vue file using

你可能感兴趣的:(使用Vue3进行前端开发,flutter,vue.js,前端)