Vue.js記法:Component注意点

1. data is a function, not a property.
data: function () { return { count: 0 } }
2. Global registry Vue.component('my-component-name', { // ... options ... })
3. send and receive data by prop between parent and son Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>' }) <blog-post title="My journey with Vue"></blog-post> <blog-post title="Blogging with Vue"></blog-post> <blog-post title="Why Vue is so fun"></blog-post>
4. v-bind component props new Vue({ el: '#blog-post-demo', data: { posts: [ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: 'Why Vue is so fun' } ] } }) <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" ></blog-post>
5. v-bind object prop using component template, <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" ></blog-post> Vue.component('blog-post', { props: ['post'], template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <div v-html="post.content"></div> </div> ` })//postの新属性はいつも<blog-post＞に利用可能
6. vm.$emit( eventName, […args] )
   eventName発生した時に、指定されたfunctionを呼び出す
   
   Vue.component('welcome-button', { template: ` <button v-on:click="$emit('welcome')">//clickとwelcomeをbind Click me to be welcomed </button> ` }) <div id="emit-example-simple"> <welcome-button v-on:welcome="sayHi"></welcome-button> </div> new Vue({ el: '#emit-example-simple', methods: { sayHi: function () { alert('Hi!') } } })
7. コンポネントの親子イベント連絡 Vue.component('blog-post', { props: ['post'], template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <button v-on:click="$emit('enlarge-text')">

   Enlarge text </button>

   <div v-html="post.content"></div> </div> ` }) //=親：=========================== <div id="blog-posts-events-demo"> <div :style="{ fontSize: postFontSize + 'em' }">//postFontSizeで表現 <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="postFontSize += 0.1" ></blog-post> </div> </div> new Vue({ el: '#blog-posts-events-demo', data: { posts: [/* ... */], postFontSize: 1　//親側でpostFontSizeを宣言 } }) //============================
8. コンポネントの親子イベント連絡2:パラメータ受け渡す Vue.component('blog-post', { props: ['post'], template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <button v-on:click="$emit('enlarge-text', 0.1)">

   Enlarge text </button>

   <div v-html="post.content"></div> </div> ` }) //=親：=========================== <div id="blog-posts-events-demo"> <div :style="{ fontSize: postFontSize + 'em' }">//postFontSizeで表現 <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="onEnlargeText" ></blog-post> </div> </div> new Vue({ el: '#blog-posts-events-demo', data: { posts: [/* ... */], postFontSize: 1　//親側でpostFontSizeを宣言 }, methods:{ onEnlargeText: function (enlargeAmount) { this.postFontSize += enlargeAmount } } }) //============================
9. コンポネントにV-modelでバインド <input v-model="searchText"> と <input v-bind:value="value"      v-on:input="$emit('input', $event.target.value)"    > 一致。 <custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input> Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value"      v-on:input="$emit('input', $event.target.value)"    > ` })

10. slot.予め確保した場所 <alert-box>//一旦以下のメッセージを表示させるが、具体的な表現は後で Something bad happened. </alert-box> Vue.component('alert-box', { template: ` <div class="demo-alert-box"> <strong>Error!</strong>//後で追加した表現内容です。 <slot></slot>　　　　　　//ここは予め確保した場所です。 </div> ` })