propsの書き方
はじめに
Vueで親コンポーネントから子コンポーネントに値を渡すpropについて、簡単にまとめました。
Propsはプロパティを意味します。
Propsを利用することで親コンポーネントから子コンポーネントに文字列、数値、配列やオブジェクトなどの値を渡すことができます。
逆に子コンポーネントから親コンポーネントに渡すときはemitを使う。
コンポーネント間でのデータ受け渡しが頻繁に行われたり階層が増えてくる場合はVuexを使った方が便利。
Propsは読み取り専用で子コンポーネントからの編集は不可。親コンポーネントが値を持っています。
子コンポーネント
propsで親コンポーネントのデータ、postを受け取り表示させる。propsは子コンポーネントに書く。
<template>
<div>
<h4>{{ props.blogTitle }}</h4>
<h4>{{ props.blogbody}}</h4>
</div>
</template>
<script>
export default {
name: "Child",
props: ["props"],
};
</script>
親コンポーネント
<template>
<div>
<!-- 変数の値を渡したい場合はv-bindを使用 -->
<Child :props="post" v-for="(post, index) in sampleBlogCards" :key="index"/>
</div>
</template>
<script>
import Child from "../components/Child";
export default {
name: "Parent",
components: {
Child
},
data() {
return {
sampleBlogCards: [
{
blogTitle:'Blog Card 1',
blogbody:'stock-1',
blogDate:'May 1, 2021',
},
{
blogTitle:'Blog Card 2',
blogbody:'stock-2',
blogDate:'May 1, 2021',
},
{
blogTitle:'Blog Card 3',
blogbody:'stock-3',
blogDate:'May 1, 2021',
},
{
blogTitle:'Blog Card 4',
blogbody:'stock-4',
blogDate:'May 1, 2021',
}
],
};
},
};
</script>
違う例。
子コンポーネント。propsで親からのデータをもらう。
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: ['message']
}
</script>
親コンポーネント
子コンポーネントをimportして”message”でHello Vue!!という値を子に渡している。
<template>
<div>
<child message="Hello Vue!!"></child>
</div>
</template>
<script>
import Child from './Child';
export default {
components: {
Child
}
}
</script>
Hello Vue!!が表示される。
参考
https://www.freecodecamp.org/news/how-to-use-props-in-vuejs/
https://reffect.co.jp/vue/vue-js-master-props-for-beginner
Author And Source
この問題について(propsの書き方), 我々は、より多くの情報をここで見つけました https://qiita.com/xiaomi05/items/bc9f8443ec403c45ea3c著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .