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