在实际项目开发当中，时常会把父组件的内容与子组件自己的模板混合起来使用。而这样的一个过程在Vue中被称为内容分发。也常常被称为**slot（插槽）**。其主要参照了当前Web Components规范草案，使用特殊的<slot>元素作为原始内容的插槽。今天主要来学习如何在Vue中使用slot的功能。

今天看到@Chris Coyier刚发的一篇帖子，使用CSS怎么写一个切口盒子（Notched Boxes）？其实这个效果早在@Lea Verou的CSS Secrets一书中有一个专门的小节介绍CSS怎么实现这个斜切口的效果。所以说这不是什么新东西。不过接下来的内容和前面还是略有不同。

2017年3月，CSS Grid在几个星期内就被发送到Chrome、Firefox和Safari的生产版本中。很高兴，大家可以使用它来解决实际问题。CSS Grid是一种不同的布局方式，在大家开始使用规范的时候，有很多常见的问题。这篇文章的目的是回答其中的一些问题，并且将会是Smashing Magazine中有关于CSS Grid一系列文章中的一篇。

在一些特别生的网站上，用户需要一个可视化的是示，以表明网站资源仍然在加载。从Spinner到Skeleton屏幕有不同的方法来解决这类的用户体验效果。如果我们使用的是开箱即用的解决方案，它为我们提供了当前的进度，比如Jam3所提供的预加载程序包，那么构建一个加载指示器就变得更容易了。为此，我们将制作一个带有动画的环形（圆形）的进度条，然后将其包装成一个组件，再提供给用户使用。

我一直在做一个网站，这个网站主要用来向用户展示大型图片。我没有创建一个典型的Lightbox效果，而是尝试让一些交互效果更有意思。最后的效果是我在一个容器上添加了一个效果，当用户把鼠标悬浮在图片（用户鼠标移动图片上）时，它会倾斜（鼠标移动到不同的角度时，向不同的方向倾斜）。

阿里巴巴智能场景事业部（Flab）是一支致力打造未来体验、探索未来科技的前沿团队，Flab技术团队综合利用人工智能、大数据、IoT等技术以及阿里巴巴独有的电商资源为线下新业务场景量身打造更加便利、快捷和科技感的用户产品和服务。这里我们广泛尝试、深入探索，不断追求技术与业务的最佳结合点，尝试从不同的维度定义未来生活。Flab技术团队也是一支快乐与Geek的团队，我们正在寻找同样快乐与Geek的小伙们加入我们！前老板团队，阿里巴巴智能场景事业部正在招前端，如果你有意向，可以将简历发至：weihua.lwh@alibaba-inc.com （坐标：杭州西厂）。

很长时间以来，我都没有对浏览器新的技术感到兴奋。Houdini是一个强大的项目，它给开发者提供了比以往任何时候都还要更强大的CSS能力。这个项目的第一部分是CSS Paint API。这篇文章将解释为什么Houdini会如此令人兴奋，然后再告诉你如何开始使用CSS Paint API。

基于组件的库或者框架（例如Vue）让我们在开发可复用的组件带来了极大的方便。这些组件可以非常简单的在独立的应用程序中被使用，并且最终呈现的效果一致。

通过前面的学习，对于Vue中组件的数据交流有了一定的了解。实际上在Vue中不同场景之下组件之间的数据通讯是不一样的，在业务中常见的组件通讯的场景主要有父子组件之间的通讯、兄弟组件间的通讯和全局组件的通讯等三种。只不过全局组件的通讯不是我们这章要阐述的范围，他涉及到Vuex。接下来分别看看父子组件和兄弟组件之间的通讯方式和实现方法。

通过上一节的学习，我们了解到了在Vue的组件中数据传递：prop向下传递，事件向上传递。意思是父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。但Vue中，props是单向数据绑定，虽然在Vue 1.0版本中，通过.sync能实现双向数据绑定。但.sync在几个版本中被移除，尽管在2.3版本重新引入.sync修饰符，可这次引入只是作为一个编译时的语法糖存在。如果直接使用.sync修饰符来做双向数据绑定，会报警告信息。那么我们如何在组件中实现双向数据绑定呢？这一节我们就来学习这方面的相关知识。