custom properties

Author: danielabar

README.md

@@ -19,6 +19,7 @@
     - [Styles](#styles)
     - [Template Binding](#template-binding)
     - [Child Components](#child-components)
+    - [Custom Properties](#custom-properties)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -310,3 +311,20 @@ Then using the custom elements in the template:
 ```
 
 Also pull out all the cards to a Category component.
+
+### Custom Properties
+
+In previous module, we created static child components. Want to create dynamic child components, pass in data to them.
+One way to do this is with *custom properties*. Example [Post.vue](src/theme/Post.vue).
+
+Use `props` property. This is an array that binds the property of the component with attribute of the element.
+
+![bind-props](course-images/bind-props.png)
+
+Move card snippet to Post component. Now it needs data passed in to it. This is done by binding the custom `<app-post>` element with the `post` json data, via `props`:
+
+```html
+<div class="column is-one-third" v-for="(post, title) in posts" v-bind:key="post.id">
+  <app-post :post="post"></app-post>
+</div>
+```

course-images/bind-props.png

@@ -1,22 +1,18 @@
 <template>
   <div class="columns">
     <div class="column is-one-third" v-for="(post, title) in posts" v-bind:key="post.id">
-      <div class="card">
-        <div class="card-content">
-          <h3>{{ post.title }}</h3>
-          {{ post.content }}
-        </div>
-        <footer class="card-footer">
-          <a class="card-footer-item" :href="post.link" target="_blank">Read More</a>
-        </footer>
-      </div>
+      <app-post :post="post"></app-post>
     </div>
   </div>
 </template>
 
 <script>
+  import Post from './Post.vue'
   // create a view instance
   export default {
+    components: {
+      'app-post': Post
+    },
     data () {
       return {
         posts: [

src/theme/Category.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="card">
+    <div class="card-content">
+      <h3>{{ post.title }}</h3>
+      {{ post.content }}
+    </div>
+    <footer class="card-footer">
+      <a class="card-footer-item" :href="post.link" target="_blank">Read More</a>
+    </footer>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['post']
+  }
+</script>