Vueのデータ
親のコンポーネントからデータを渡すやり方
子が自分でデータを持つことも可能(今回は、こちらを)
子コンポーネントでデータをしてみる
下の記載をしたら const で定義した文字列が表示されている!
TestComponent.vue
<script setup>
const dataTest = "これは、子コンポーネントです";
<script>
<template>
<p> {{ dateTest }} </p>
</template>
App.vue
<template>
<TestComponent />
</template>
データバインディング
HTMLの要素とVueのデータを結びつける機能、4つある
- 1.テキストバインディング
HTML内にテキストとしてデータを表示させる
<!-- 一つ目が、{{}}...マスタッシュ構文 -->(Vue3では、こっちが一般的)
<template>
<p>{{ dateTest }}</p>
</template>
<!-- 二つ目が、v-textを使う -->
<template>
<p v-text="dataText"></p>
</template>
- 2.属性バインディング
HTML要素の属性にデータを割り当てる
v-bind:属性名="データの名前" と書く
<script setup>
const imageUrl = "/sample.png"
</script>
<template>
<img v-bind:src="imageUrl" />
<img :src="imageUrl" /> この様にで省略した書き方ができる。
</template>
- 3.イベントバインディング
HTML要素のイベント(クリックなど)と
Vueのメソッドを結びつける
v-on:イベントの種類='メソッド名' と書く。
<script setup>
function myMethod() {
consol.log("メソッド実行");
}
<script>
<template>
<button v-on:click="myMethod">メソッド実行</button>
<button @:click="myMethod">メソッド実行</button> @で省略できる
</template>
- 4.双方性バインディング
HTMLのフォームの要素とデータを双方向に結び付ける。
片方が変わったら片方にも反映する様になる。
要素に v-model='データの名前' と書く。
データの宣言は ref関数 を使用し、 const データの名前 = ref(''); と書く。
ref関数で値を宣言
その値を常に監視し、データが反映されるとすぐに画面に反映される様になる。
v-modelとセットで使うと覚える
# script部分ではref関数を使ってデータを宣言
<script setup>
import { ref } from "vue";
const name = ref("");
<script>
<template>
<div>
<label for="name">名前</label>
<input type="text" id="name" v-model="name">
<p>入力された名前: {{ name }}</p>
</div>
</template>