vue 插槽slot学习

形象类别

可以在凹槽中配置各种东西

使用方法

1. 创建vue对象
2. 创建多个组件，其中在创建插槽所使用的组件时，要在定义模版内容的时候格外注意 通过使用 \ 进行换行
3. 在组件标签中定义绑定关系和调用关系

下图所示为数据的传递方向

实际上只要理解了数据是如何传递的， 绑定关系是如何建立的 ， 是怎么调用数据的，理解插槽就会更加的简单，他无非就是多了一个模版写法而已。下面来介绍一下这三种方式是如何实现的。

1. vue对象里面通过data属性创建了数据源，用于后期视图进行展示
2. 定义的组件件对象，通过props属性和vue对象中data中的数据建立联系。当这层联系建立后，数据源中的数据就可以 以props作为媒介，将数据传输给组件对象的template属性
3. 组件对象的template有了数据后，就可以通过组件标签进行数据展示了。
4. 数据流向：根实例 data（vm） → 父组件模板绑定（ 内部的绑定，父传子的 props 绑定关系）→ 子组件 props（todo-title/todo-items） → 子组件模板展示

注意：最顶层的 “父” 是 Vue 根实例（var vm = new Vue({ el: "#app" ... })），它对应的模板就是

▼
text
复制代码
单词和vue学习都已完成并补交。 开心，我会变得越来越好！ 加油！