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.」という文字列が出力されます。
Editors pick
Our other articles
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.」という文字列が出力されます。
Editors pick
Our other articles