如何将参数传递给 Vue 组件？答案

【问题标题】：How can i pass a parameter to a Vue component?如何将参数传递给 Vue 组件？
【发布时间】：2021-04-03 22:18:24
【问题描述】：

我刚刚开始使用 Vue，我正在尝试了解一些基本概念，例如条件渲染以及如何将数据从我加载应用程序的位置传递到组件。假设我正在渲染一个像这样的 Vue 组件：

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

假设myComponent 看起来像这样：

<template>
  <div>
  
    <h1>First block</h1>

    </h1>Second block</h1>

  </div>
</template>

当我根据传递给组件的参数加载 Vue 应用程序时，我希望能够呈现 First block 或 Second block，例如：

<div id="app">
    <myComponent id="first"></myComponent>
</div>

在这种情况下，我应该看到First block，而如果不是id="first"，而是id="second"，则输出应该是Second block。我该怎么做？

我知道这是一个非常基本的问题，但我发现的大多数资料都解释了如何反其道而行之。任何形式的建议表示赞赏！

【问题讨论】：

标签： vue.js

【解决方案1】：

在 vue 中，您可以将 props（参数）传递给在其脚本中定义这些的组件，例如：

<template>
  <div>
  
    <h1 v-if="block==='first'">First block</h1>

    </h1 v-else>Second block</h1>

  </div>
</template>

<script>
export default{
  props:{
    block:{
       type:String, 
        default:'first'
     }
  }
}
</script>

在父组件中传递 prop 如下：

<div id="app">
    <myComponent block="first"></myComponent>
</div>

或

<div id="app">
    <myComponent block="second"></myComponent>
</div>

【讨论】：