Challenge programming

Vue.js

 

データーの受け渡し(親コンポーネントから子コンポーネント)| Data passing (from parent component to child component)

手順➀ 子コンポーネントにpropsオプションを追加する。| Procedure ➀ Add the props option to the child component.

Vue.component('my-product',{
template:`
<div>
<span>{{name}}</span>:<span>{{price}}(円)</span>
</div>`,

props: ['name', 'price']

});

手順➁ 親テンプレートで子コンポーネントのカスタムタグに属性を追加する。| Procedure ➁ Add an attribute to the custom tag of the child component in the parent template.

<div id="app">
<my-product name="スマホケースA" price="980"></my-product>
<my-product name="スマホケースB" price="1580"></my-product>
</div>

親コンポーネントは属性で渡し、子コンポーネントはpropsで受け取る。| The parent component is passed as an attribute, and the child component is received as props.

    

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません(ToT) その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.

ぺージの先頭に戻る(Return to top of page)


©2020年9月 Challenge programming

プライバシーポリシー