概要
SFC (Single File Components) を使ってコンポーネントを分割する方法を紹介します
また分割したコンポーネントに値を渡す方法も紹介します
環境
- macOS 11.7
- node 18.9.0
- quasar 2.8.2
サンプルコード
- vim src/pages/IndexPage.vue
<template>
<FormTest
:foo="name"
>
</FormTest>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const name = ref('default_value_from_IndexPage.vue');
import FormTest from './FormTest.vue';
</script>
- vim src/pages/FormTest.vue
<template>
<div>
<input type="text" v-model="value" />
<p>Value: {{ value }}</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
foo: String
})
const value = ref(props.foo)
</script>
ちょっと解説
FormTest.vue を IndexPage.vue で使うことを想定しています
FormTest では setup を使っておりその場合に値を受け取るには defineProps を使います
IndexPage から name というオブジェクトを使って値を渡しており値を渡す場合は :foo="name" という感じでコロンを使ってプロパティを参照し渡したい変数名を指定します
0 件のコメント:
コメントを投稿