javascript Vue.js主要组件和导入组件

Posted 2021-05-03

<template>
  <div id="app">
    <Todos v-bind:todos="todos"/> /*Binds/Sends the todos Object to Todos Component */
    <Categories v-bind:categories="categories" /> /*Binds/Sends the categories Object to Categories Component */
  </div>
</template>

<script>
/* Components to Import */
import Todos from './components/Todos' 
import Categories from './components/Categories' 

/* Data to Bind to Components */
export default {
  name: 'app',
  components: {
    Todos,
    Categories
  },
  data(){
    return {
      /* Object Todos */
      todos: [
        {
          id: 1, 
          title: "Todo One", 
          completed: false
        }
        ],
        /* Object Categories */
        categories: [
          {
            id: 1,
            name: "Categorie 1"
          }
        ]
    }
  }
}
</script>