Vueメモ

親子のコンポーネントの情報の受け渡し（モーダルダイアログ）

code:vue:子

<script setup>

import { ref } from "vue";

const props = defineProps({

inputValue: String, //入力パラメータ

});

//パラメータ props.inputValue はreadonlyなため、コピーすることでv-modelに設定できる

const formValue = ref(props.inputValue);

</script>

<template>

<textarea v-model="formValue"></textarea> //v-modelに設定

<button @click="$emit('applyed', formValue)">適用</button>

<button @click="$emit('canceled')">キャンセル</button>

</template>

code:vue:親

<script setup>

import { ref } from "vue";

const inputModalDisp = ref(false); //ダイアログ表示／非表示

// インポートダイアログからの戻り値を受け取る

function importEditorText(retVal) {

// retValが戻り値

// ...なんやかんやする...

// ダイアログを閉じる

inputModalDisp.value = false;

}

</script>

...

<InputModal

v-if="inputModalDisp" //v-showではなくv-if

:inputValue="txtInString"

@applyed="importEditorText" //カッコを省略すると戻ってきた値を関数にわたせる

@canceled="inputModalDisp = false"

/>

...

<button @click="inputModalDisp = true">入力ダイアログを開く</button> //

v-ifとv-showの違い

dialogshowがbool(true/false)のとき、

<Component v-if="dialogshow" />

と

<Component v-show="dialogshow" />

の違い。どちらも、dialogshowがtrueのときComponentを表示する。

v-showはスタイルで非表示しているだけで、中身のDOMはページ表示時に生成されている。よってコンポーネントの内容もページ表示時に評価される。

v-ifは変数dialogshowがtrueになったタイミングではじめてコンポーネントの内容が評価される。

コンポーネントに渡すパラメータがある場合はv-ifのほうをつかうべき。

フォームの内容を自動的に全選択する場合(Vue)

textareaにカーソルが乗ったら自動的に全選択したいとする。

code:html

<textarea @focus="this.select()"></textarea>

なのでこうする

code:html

<textarea onfocus="this.select()"></textarea>

ネイティブJavascriptを書いただけ。Vueの中で書いているとネイティブJSを忘れがち。