slot-scope：作用域插槽特性：子组件传递数据给父组件

1. 插槽的作用：

如果没有在组件模板中放置插槽，则在html 代码中组件自定义元素之间的内容将不显示;

如果在组件模板中设置插槽，则相当于，在组件中提前预留了位置，给在html 代码中组件自定义元素之间的内容放置。即使vue 组件被封装好了不再改动，也可以在html 层面上，在自定义元素之间增加内容或者设置样式等操作。

详见：插槽的作用

例子解析：在模板中添加了 ，是给 html 层面自定义元素  中间的内容 "Your Profile" 预留了显示的位置。

如果模板中没有添加，在 html 层面自定义元素之间的内容将会被抛弃（深入点理解组件和html 的关系：就是html只会显示在组件模板中定义的内容。如果在 html 层面自定义元素中间插入其他内容，而没有提前在模板中定义（没有放置 作为预留位置），自定义元素中间的内容将会被抛弃，不显示。）

2. slot-scope：插槽的作用域

官网中有一句特别强调的话：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

slot-scope 是插槽 的一个特性。使用这个特性，父组件获取子组件 slot 绑定的属性值，传递数据（通过属性值传递数据）。

组件模板: 添加 slot ，（在html 层面   已将 data 里的数据 " todolists" 作为对象绑定在这个 slot 的 todos 特性(prop 属性)。）所以vue 实例里的 "todolist" 数据可以传入组件里使用，也就是组件里的 "todos"。

然后

遍历 "todos" 这个对象

Vue.component('todo-list', {
	props:{
            todos:[Array,Object]
          },
		  
//
 元素遍历组件porp 属性的 todos 数据（html 层面上，自定义元素已经通过 绑定porp 获取了父组件的 data元素"todolists"。也就是说，这里的 "todos" 已经获取 data元素"todolists" 的数据。这里就可以直接使用"todos" 了）
   template:`
	
 
	 

	 
	 
	 
	
`
})

vue 实例部分代码： 

new Vue({
  el: '#todo-list-example',
  data: {
    todolists: [
      {
        id: 1,
        title: 'Do the dishes',
        isComplete:true,
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ] }
})

 html 代码部分:

添加一个