vue實現todo功能（二）：組件嵌套與組件傳參

在學習vue的時候，有兩個經常使用的功能：組件嵌套，組件傳參

組件嵌套

咱們知道vue最大的特徵就是將不一樣的元素獨立劃分紅不一樣的板塊，那麼如何引入組件，使用組件是首要一步。

好比咱們如今又app.vue和todo.vue兩個文件

// app.vue

<template>
    <div id="root">
        <!-- 註冊名 -->
        <todo/>
    </div>
</template>

<script>
    // 引入vue文件
    import todo from './todo/todo.vue'
    
    export default {
        // 註冊組件
        components: {
            todo
        }
    }
</script>

// todo.vue

<template>
    <div>
        Hi!我是大帥比
    </div>
</template>

經過如下三步，咱們就實現了組件嵌套

1. 引用文件
2. 註冊組件
3. 引入到html

這樣就實現了組件之間的嵌套與使用。

組件傳參

// 父組件：app.vue

<template>
  <div id="root">
    <!-- 經過 :傳入名="本地數據" 傳輸數據 -->
    <todo :kaso="person"></todo>
  </div>
</template>

<script>
  import todo from "./todo/todo.vue"

  export default {
    // 註冊組件
    components: {
      todo
    },
    // 父組件數據
    data() {
      return {
        // person對象
        person:{
          name : "kaso",
          age: 20
        }
      }
    }
  }
</script>

// todo.vue

<template>
  <div>
      {{this.kaso}}
  </div>
</template>

<script>
  export default {
    // 從外部接受傳入名kaso
    props:{
      kaso :{
        // 傳入類型檢測
        type:Object,
        // 是否傳入檢測
        require:true
      }
    }
  }
</script>

總結：

1. :傳入名="本地數據"
2. props接受數據

這樣咱們就實現了父組件向子組件數據的傳輸。

在下一章咱們就正式開始了咱們的vuetodo項目了！

催更Q：516764216