具名插槽、作用域插槽的新写法

插槽

1. 具名插槽

   自 2.6.0 起有所更新。已废弃的使用 slot attribute 的语法

   但是我们有了新的语法，如下：

   子组件 childCom:

   父组件 app:

   效果图：

   

   注意： v-slot 只能添加在 template 上

2. 作用域插槽

   有时让插槽内容能够访问子组件中才有的数据是很有用的。但是由于子组件的作用域在子组件，而父组件的作用域在父组件，这样一来，父组件就访问不到子组件的信息了，但是我们又不想用$emit发送事件去传递信息，这个时候可以用作用域插槽来实现。注意：你不要以为这又是父传子的一种方式，因为这种方法仅限于在使用插槽的时候才有用，话不多说，看代码：

   vm实例：

   子组件 childCom:

   父组件 app:

   效果图：

   

处理边界情况

1. $root 用来访问根组件

2. $parent 用来从一个子组件访问父组件的实例

3. ref 和 $refs 的用法

   在组件上面使用 ref 这个属性绑定，属性值自取，然后就可以通过 $refs.属性名 这种方式去获取到指定组件的实例了。

   其实不仅仅是组件能够使用 ref ,标签元素也能使用。

4. 依赖注入

   现在我们有一个需求，如果我们存在多个组件嵌套的，然后现在其中某一个组件想访问其曾祖父组件的方法，那么使用上面两种方式都是不可取的，这个时候官方提供了 provide 和 inject 这两个属性来解决这个问题。

   • provide 允许我们指定想要提供给后代组件的数据/方法，且该属性是一个方法，返回一个对象，键名就是我们要传到后代组件的标志
   • 然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性。该属性是一个数组类型，跟 props 的数组语法类似

   说到这里，有的人可能会觉得这不就是跟 props 差不多嘛。没错，它确实差不多，但是还是有区别的，比如，祖先元素不需要知道哪些后代组件使用它提供的属性；其次，后代组件也不需要知道被注入的属性来自哪里

   代码如下：

   父组件：

   效果图：