JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<div id="js-app">
  <app>
  </app>
</div>

Babel + JSX

// 子コンポーネント側で親に呼び出してもらいたい値を指定できる
// for 文などで必要になった値を親でどう呼び出すか決めたいってときに便利
// 親側ではcollectionの中のsingleの要素にはアクセスできないし かつ 子の方でpropertyまで指定してしまうと(todo.textなど)ほかのコンパイルで使いまわしづらい
// (entityの情報を削ぎ落とすことができる)

// 何をslotするかは親側で決められる


const mainTempl = `
<div class="app-layout">
	<todo-list v-bind:todos="todos">
    <template slot-scope="{ todo }">
      <span v-if="todo.isComplete">✓</span>
	    {{ todo }}
			{{ todo.text }}	
    </template>
  </todo-list>
</div>
`;

/* 
const testTempl = `
<div>
  <todo-list/>
</div>
` */


/* <todo-list> */
const todoList = `
  <ul>
    <li
      v-for="tod in todos"
      v-bind:key="tod.id"
    >
      <slot v-bind:todo="tod" />
    </li>
  </ul>
`;

Vue.component('app', {
/*   template: mainTempl, */
  template: mainTempl,
  data() {
    return {
      todos: [
        {id: 1, text: 'hoge', isComplete: true},
        {id: 2, text: 'fuga', isComplete: true},
        {id: 3, text: 'piyo', isComplete: false},
      ]
    }
  }
})

Vue.component('todo-list', {
  template: todoList,
  props: ['todos'],
  data() {
	  return {
      messages: [
        {id:1, content: 'hoge'}
      ]
  	}
  }
})


/* 
Vue.component('app-container', {
  template: containerTpl
})
 */
new Vue({
  el: "#js-app"
});