vue深入浅出系列教程（官方示例太抽象了）

vue深入浅出系列教程（官方示例太抽象了）结果该API的应用场景主要是为了在父组件当中决定子组件中的数据的展示方式，所以在子组件中定义的items数组，在父组件中通过声明slot-scope引用子组件中的items，但是官方也指出该API不支持双向绑定。所以在子组件中改变items的值不会导致重新渲染。Vue中有许多黑科技，其中有一个点还是比较难理解的。子组件代码父组件代码

随着前后端开发的分离，Node的发展促使前端项目跟后端一样工程化。JQuery等直接操作dom的js库被抛弃。React、Angular、Vue等前端框架提出了新的前端理论架构和概念，如MVVM、数据驱动、虚拟DOM、双向绑定等。

我们先不讲JQuery是否过时，但是我们还是要带着发展的眼光看问题，先跟上时代的脚步。

Vue

这三大前端框架，其中属Vue最容易上手。对于刚接触那些新概念的我来说，还是很容易吸收接受。

Vue中有许多黑科技，其中有一个点还是比较难理解的。

作用域插槽

子组件代码

父组件代码

该API的应用场景主要是为了在父组件当中决定子组件中的数据的展示方式，所以在子组件中定义的items数组，在父组件中通过声明slot-scope引用子组件中的items，但是官方也指出该API不支持双向绑定。所以在子组件中改变items的值不会导致重新渲染。

结果

demo地址：https://github.com/CheeseC/vue-scoped-slot-demo

官方示例：

示例

主要参考：https://cn.vuejs.org/v2/guide/components-slots.html#作用域插槽

总结一下：作用域插槽特性主要是满足在父组件当中决定子组件中的数据的展示方式。