vue实现todo功能(二):组件嵌套与组件传参

Kaso

在学习vue的时候,有两个常用的功能:组件嵌套,组件传参

组件嵌套

我们知道vue最大的特征就是将不同的元素独立划分成不同的板块,那么如何引入组件,使用组件是首要一步。

比如我们现在又app.vuetodo.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

阅读 4k

天才总是着手改变世界

8 声望
1 粉丝
0 条评论

天才总是着手改变世界

8 声望
1 粉丝
文章目录
宣传栏