在Vue官方文档中提到：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。因此像下面的示例是无法正常工作的
<current-user> {{ user.firstName }} </current-user>
在<current-user>组件中可以访问到user属性，但是提供的内容却是在父组件渲染的。如果想要达到期望的效果，这个时候就需要使用作用域插槽了。下面是改写后的代码，更多知识点可以直接查看官方文档的。
<!-- current-user组件定义部分 --> <span> <slot v-bind:user="user"> {{ user.lastName }} </slot> </span> <!-- current-user 使用 --> <current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user>
上面的示例其实就是官方的示例，这里需要说明的是，其实在Vue中所谓的作用域插槽功能类似于React中的Render Props的概念，只不过在React中我们更多时候不仅提供了属性，还提供了操作方法。但是在Vue中更多的是提供数据供父作用域渲染展示，当然我们也可以把方法提供出去，例如：
<template> <div> <slot v-bind:injectedProps="slotProps"> {{ user.lastName }} </slot> </div> </template> <script> export default { data() { return { user: { firstName: 'snow', lastName: 'wolf' } } }, computed: { slotProps() { return { user: this.user, logFullName: this.logFullName } } }, methods: { logFullName() { console.log(`${this.firstName} ${this.lastName}`) } } } </script>
在父组件中使用：
<current-user> <template v-slot:default="{ injectedProps }"> <div>{{ injectedProps.user.firstName }}</div> <el-button @click="injectedProps.logFullName">Log Full Name</el-button> </template> </current-user>
在上面的代码中我们实际上使用解构的方式来取得injectedProps，基于解构的特性还可以重命名属性名，在prop为undefined的时候指定初始值。
<current-user v-slot="{ user = { firstName: 'Guest' } }"> {{ user.firstName }} </current-user>
如果组件只有一个默认的插槽还可以使用缩写语法，将v-slot:default="slotProps"写成v-slot="slotProps"，命名插槽写成v-slot:user="slotProps"，如果想要动态插槽名还可以写成v-slot:[dynamicSlotName]，此外具名插槽同样也有缩写语法，例如 v-slot:header可以被重写为#header
上面介绍了很多插槽相关的知识点足已说明其在开发过程中的重要性。说了很多在模板中如何定义和使用作用域插槽，现在进入正题如何在jsx中同样使用呢？
// current-user components { data() { return { user: { firstName: 'snow', lastName: 'wolf' } } }, computed: { slotProps() { return { user: this.user, logFullName: this.logFullName } } }, methods: { logFullName() { console.log(`${this.firstName} ${this.lastName}`) } }, render() { return ( <div> {this.$scopedSlots.subTitle({ injectedProps: this.slotProps })} </div> ) } }
然后在父组件中以jsx使用：
<current-user {...{ scopedSlots: { subTitle: ({ injectedProps }) => ( <div> <h3>injectedProps.user</h3> <el-button onClick={injectedProps.logFullName}>Log Full Name</el-button> </div> ) } }}></current-user>
指令
这里需要注意的是在jsx中所有Vue内置的指令除了v-show以外都不支持，需要使用一些等价方式来实现，比如v-if使用三目运算表达式、v-for使用array.map()等。
对于自定义的指令可以使用v-name={value}的语法来写，需要注意的是指令的参数、修饰符此种方式并不支持。以官方文档指令部分给出的示例v-focus使用为例，介绍二种解决办法：
1 直接使用对象传递所有指令属性
<input type="text" v-focus={{ value: true }} />
2 使用原始的vnode指令数据格式
{ directives：{ focus: { inserted: function(el) { el.focus() } } }, render() { const directives = [ { name: 'focus', value: true } ] return ( <div> <input type="text" {...{ directives }} /> </div> ) } }
过滤器