Vue definepropsの使い方
props Vue propsdefinepropspropswatchThis article explains how to pass values to Vue using props. The side that passes the value with props prepares a variable, and the side that receives the value receives it with defineprops. Also, detect changes in props on the side that receives the value using watch.
by JanitorSep 15, 2023
propsでvueに値を受け渡す方法です。propsで値を渡す側は変数を用意し、値を渡される側ではdefinepropsで受け取ります。また、値を渡される側でpropsの変更をwatchで検知します。環境はNuxt3です。
propsでvueに値を受け渡す方法です。propsで値を渡す側は変数を用意し、値を渡される側ではdefinepropsで受け取ります。また、値を渡される側でpropsの変更をwatchで検知します。環境はNuxt3です。
Jump Links
1. propsとして変数を渡す準備
2. propsとして変数を受け取る準備
3. 動作確認
1. propsとして変数を渡す準備
1. propsとして変数を渡す準備
今回の記事では下の図のようなフォルダ構成になっています。default.vueでpropsとして渡す変数を用意し、pagesフォルダのpropsStudyでうけとります。
今回の記事では下の図のようなフォルダ構成になっています。default.vueでpropsとして渡す変数を用意し、pagesフォルダのpropsStudyでうけとります。
default.vueでは下のソースコードのようにしています。
default.vueでは下のソースコードのようにしています。
default.vue
<script setup>
var num = reactive( { value: 0 } );
var str = reactive( { value: "この文字列はdefault.vueから渡されます" } );
var obj0 = reactive( { value: { property0: num, property1: 'obj0のproperty1に設定された文字列です' } } );
var obj1 = reactive( { value: { property0: { property0_0: num }, property1: 'obj1のproperty1に設定された文字列です' } } );
var increment = () => {
num.value = num.value + 1;
}
</script>
<template>
<VApp style="margin-left: 10px;">
<VMain class="default">
<NuxtPage
:num="num.value"
:str="str.value"
:obj0="obj0.value"
:obj1="obj1.value"/>
<VBtn @click="increment()" >
increment num!
</VBtn>
</VMain>
</VApp>
</template>
default.vue
<script setup>
var num = reactive( { value: 0 } );
var str = reactive( { value: "この文字列はdefault.vueから渡されます" } );
var obj0 = reactive( { value: { property0: num, property1: 'obj0のproperty1に設定された文字列です' } } );
var obj1 = reactive( { value: { property0: { property0_0: num }, property1: 'obj1のproperty1に設定された文字列です' } } );
var increment = () => {
num.value = num.value + 1;
}
</script>
<template>
<VApp style="margin-left: 10px;">
<VMain class="default">
<NuxtPage
:num="num.value"
:str="str.value"
:obj0="obj0.value"
:obj1="obj1.value"/>
<VBtn @click="increment()" >
increment num!
</VBtn>
</VMain>
</VApp>
</template>
script setup内で、変数num, str, obj0, obj1と変数numの値をインクリメントする関数を作成しています。tempate内では、NuxtPageに対して、作成した変数をpropsとして渡しています。
script setup内で、変数num, str, obj0, obj1と変数numの値をインクリメントする関数を作成しています。tempate内では、NuxtPageに対して、作成した変数をpropsとして渡しています。
2. propsとして変数を受け取る準備
2. propsとして変数を受け取る準備
propsStudyフォルダにindex.vueを作成し、下記のソースコードでpropsとして変数を受け取ることができます。
propsStudyフォルダにindex.vueを作成し、下記のソースコードでpropsとして変数を受け取ることができます。
propsStudy/index.vue
<script setup>
import { watch } from 'vue';
const props = defineProps( {
num: Number,
str: String,
obj0: Object,
obj1: Object,
} );
watch(
() => props.num,
( newValue, oldValue ) => {
console.log( "props.num is changed." );
}
);
</script>
<template>
<div>num:{{ props.num }}</div>
<div>str:{{ props.str }}</div>
<div>obj0:{{ props.obj0 }}</div>
<div>obj1:{{ props.obj1 }}</div>
</template>
<style>
</style>
propsStudy/index.vue
<script setup>
import { watch } from 'vue';
const props = defineProps( {
num: Number,
str: String,
obj0: Object,
obj1: Object,
} );
watch(
() => props.num,
( newValue, oldValue ) => {
console.log( "props.num is changed." );
}
);
</script>
<template>
<div>num:{{ props.num }}</div>
<div>str:{{ props.str }}</div>
<div>obj0:{{ props.obj0 }}</div>
<div>obj1:{{ props.obj1 }}</div>
</template>
<style>
</style>
script setup内のdefinePropsの中で、受け取る変数を記載します。その下のwatchでpropsとして渡された変数numの変更を検知します。template内ではpropsとして渡された変数を表示しています。
参考にさせて頂いたウェブサイトURL
https://stackoverflow.com/questions/72660970/using-watchers-on-props-in-vue3-script-setup
script setup内のdefinePropsの中で、受け取る変数を記載します。その下のwatchでpropsとして渡された変数numの変更を検知します。template内ではpropsとして渡された変数を表示しています。
参考にさせて頂いたウェブサイトURL
https://stackoverflow.com/questions/72660970/using-watchers-on-props-in-vue3-script-setup
3. 動作確認
3. 動作確認
yarn devして、propsStudyにアクセスすると下の画像のような表示になります。
yarn devして、propsStudyにアクセスすると下の画像のような表示になります。
「INCREMENT NUM!」というボタンを押すと、表示が下の図のように変わり、開発者ツールのコンソールを開くと「props.num is changed.」という文字列が出力されます。
「INCREMENT NUM!」というボタンを押すと、表示が下の図のように変わり、開発者ツールのコンソールを開くと「props.num is changed.」という文字列が出力されます。
Vue definepropsの使い方
props Vue propsdefinepropspropswatchThis article explains how to pass values to Vue using props. The side that passes the value with props prepares a variable, and the side that receives the value receives it with defineprops. Also, detect changes in props on the side that receives the value using watch.
by JanitorSep 15, 2023
propsでvueに値を受け渡す方法です。propsで値を渡す側は変数を用意し、値を渡される側ではdefinepropsで受け取ります。また、値を渡される側でpropsの変更をwatchで検知します。環境はNuxt3です。
propsでvueに値を受け渡す方法です。propsで値を渡す側は変数を用意し、値を渡される側ではdefinepropsで受け取ります。また、値を渡される側でpropsの変更をwatchで検知します。環境はNuxt3です。
Jump Links
1. propsとして変数を渡す準備
2. propsとして変数を受け取る準備
3. 動作確認
1. propsとして変数を渡す準備
1. propsとして変数を渡す準備
今回の記事では下の図のようなフォルダ構成になっています。default.vueでpropsとして渡す変数を用意し、pagesフォルダのpropsStudyでうけとります。
今回の記事では下の図のようなフォルダ構成になっています。default.vueでpropsとして渡す変数を用意し、pagesフォルダのpropsStudyでうけとります。
default.vueでは下のソースコードのようにしています。
default.vueでは下のソースコードのようにしています。
default.vue
<script setup>
var num = reactive( { value: 0 } );
var str = reactive( { value: "この文字列はdefault.vueから渡されます" } );
var obj0 = reactive( { value: { property0: num, property1: 'obj0のproperty1に設定された文字列です' } } );
var obj1 = reactive( { value: { property0: { property0_0: num }, property1: 'obj1のproperty1に設定された文字列です' } } );
var increment = () => {
num.value = num.value + 1;
}
</script>
<template>
<VApp style="margin-left: 10px;">
<VMain class="default">
<NuxtPage
:num="num.value"
:str="str.value"
:obj0="obj0.value"
:obj1="obj1.value"/>
<VBtn @click="increment()" >
increment num!
</VBtn>
</VMain>
</VApp>
</template>
default.vue
<script setup>
var num = reactive( { value: 0 } );
var str = reactive( { value: "この文字列はdefault.vueから渡されます" } );
var obj0 = reactive( { value: { property0: num, property1: 'obj0のproperty1に設定された文字列です' } } );
var obj1 = reactive( { value: { property0: { property0_0: num }, property1: 'obj1のproperty1に設定された文字列です' } } );
var increment = () => {
num.value = num.value + 1;
}
</script>
<template>
<VApp style="margin-left: 10px;">
<VMain class="default">
<NuxtPage
:num="num.value"
:str="str.value"
:obj0="obj0.value"
:obj1="obj1.value"/>
<VBtn @click="increment()" >
increment num!
</VBtn>
</VMain>
</VApp>
</template>
script setup内で、変数num, str, obj0, obj1と変数numの値をインクリメントする関数を作成しています。tempate内では、NuxtPageに対して、作成した変数をpropsとして渡しています。
script setup内で、変数num, str, obj0, obj1と変数numの値をインクリメントする関数を作成しています。tempate内では、NuxtPageに対して、作成した変数をpropsとして渡しています。
2. propsとして変数を受け取る準備
2. propsとして変数を受け取る準備
propsStudyフォルダにindex.vueを作成し、下記のソースコードでpropsとして変数を受け取ることができます。
propsStudyフォルダにindex.vueを作成し、下記のソースコードでpropsとして変数を受け取ることができます。
propsStudy/index.vue
<script setup>
import { watch } from 'vue';
const props = defineProps( {
num: Number,
str: String,
obj0: Object,
obj1: Object,
} );
watch(
() => props.num,
( newValue, oldValue ) => {
console.log( "props.num is changed." );
}
);
</script>
<template>
<div>num:{{ props.num }}</div>
<div>str:{{ props.str }}</div>
<div>obj0:{{ props.obj0 }}</div>
<div>obj1:{{ props.obj1 }}</div>
</template>
<style>
</style>
propsStudy/index.vue
<script setup>
import { watch } from 'vue';
const props = defineProps( {
num: Number,
str: String,
obj0: Object,
obj1: Object,
} );
watch(
() => props.num,
( newValue, oldValue ) => {
console.log( "props.num is changed." );
}
);
</script>
<template>
<div>num:{{ props.num }}</div>
<div>str:{{ props.str }}</div>
<div>obj0:{{ props.obj0 }}</div>
<div>obj1:{{ props.obj1 }}</div>
</template>
<style>
</style>
script setup内のdefinePropsの中で、受け取る変数を記載します。その下のwatchでpropsとして渡された変数numの変更を検知します。template内ではpropsとして渡された変数を表示しています。
参考にさせて頂いたウェブサイトURL
https://stackoverflow.com/questions/72660970/using-watchers-on-props-in-vue3-script-setup
script setup内のdefinePropsの中で、受け取る変数を記載します。その下のwatchでpropsとして渡された変数numの変更を検知します。template内ではpropsとして渡された変数を表示しています。
参考にさせて頂いたウェブサイトURL
https://stackoverflow.com/questions/72660970/using-watchers-on-props-in-vue3-script-setup
3. 動作確認
3. 動作確認
yarn devして、propsStudyにアクセスすると下の画像のような表示になります。
yarn devして、propsStudyにアクセスすると下の画像のような表示になります。
「INCREMENT NUM!」というボタンを押すと、表示が下の図のように変わり、開発者ツールのコンソールを開くと「props.num is changed.」という文字列が出力されます。
「INCREMENT NUM!」というボタンを押すと、表示が下の図のように変わり、開発者ツールのコンソールを開くと「props.num is changed.」という文字列が出力されます。