Как я могу передать параметр компоненту Vue?
Я только начал работать с Vue и пытаюсь понять некоторые основные понятия, такие как условный рендеринг и как передавать данные, откуда я загружаю приложение, в компонент. Предположим, я визуализирую компонент Vue следующим образом:
<div id = "app">
<myComponent></myComponent>
</div>
Предположим, что myComponent выглядит так:
<template>
<div>
<h1>First block</h1>
</h1>Second block</h1>
</div>
</template>
Я хочу иметь возможность отображать First block или Second block, когда я загружаю приложение Vue в соответствии с параметром, который я передаю компоненту, например:
<div id = "app">
<myComponent id = "first"></myComponent>
</div>
В этом случае я должен увидеть First block, тогда как если бы вместо id = "first" было id = "second", вывод должен был быть Second block. Как я могу это сделать?
Я знаю, что это очень простой вопрос, но большинство источников, которые я нашел, объяснили, как сделать наоборот. Любые советы приветствуются!
Ответы 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>
в родительском компоненте передайте реквизит, например:
<div id = "app">
<myComponent block = "first"></myComponent>
</div>
или
<div id = "app">
<myComponent block = "second"></myComponent>
</div>