好久没用写东西了，先说几句闲话，菠萝同学结束了整整5年的北漂生活，收拾行囊来到了南京，开启人生的下一个阶段，换了家国企，框架用的Vue，所有仔细学习学习啦，在此记录记录自己的学习过程
由于之前一直写React，所有在学习的过程中很自然就和react比较了起来，这样也有好处，毕竟自己对React比较熟悉，更容易理解。但是也有坏处，React的设计真的更简洁明了啊。
今天来看Vue的Slot插槽，Slot 通俗的理解就是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），这和children起到了一样的作用，下面我们来码码不同场景下这俩框架的代码。
一、内容插槽
Vue 怎么写
定义两个组件HelloWorld.vue、Test.vue
然后在HelloWorld.vue组件中引用Test.vue组件
<!-- HelloWorld.vue -->
<template>
<div class="hello">
<Test>
这里是slot内容
</Test>
</div>
</template>
<script>
import Test from './Test';
export default {
name: 'HelloWorld',
components: {
Test
},
}
</script>
<!--Test.vue -->
<template>
<div>
<h1>这里是非slot内容</h1>
<h2>
<slot></slot>
</h2>
</div>
</template>
<script>
export default {
name: 'Test',
}
</script>
当组件渲染的时候，<slot></slot>会被替换为"这里是slot内容"
插槽内也可以包含任何模板代码，包括HTML，或者是其它组件
React 怎么写
class HelloWorld extends Component {
render() {
return (
<Test>
这里是slot内容
</Test>
)
}
}
class Test extends Component {
render() {
return (
<div>
<h1>这里是非slot内容</h1>
<h2>{this.props.children}</h2>
</div>
);
}
}
二、具名插槽
我理解就是有具体名字的slot组件
使用场景：当我们一个组件里需要多个插槽时
vue怎么写
<div>
<header>
<!-- 我们希望把页头放这里 -->
</header>
<div class="page">
<!-- 我们希望把页面内容放这里 -->
</div>
</div>
这时候，我们就可以使用name属性，slot组件有一个name属性，用于命名插槽
<!--Test.vue -->
<template>
<div>
<h1>
<slot name="header"></slot>
</h1>
<h2>
<slot name="page"></slot>
</h2>
</div>
</template>
<script>
export default {
name: 'Test',
}
</script>
如果一个<slot>不带name属性的话，那么它的name默认为default
在向具名插槽提供内容的时候，我们可以在<template>元素上使用v-slot指令，并以参数的形式提供其名称
<!-- HelloWorld.vue -->
<template>
<div class="hello">
<Test>
<template v-slot:header>
这里是slot内容-header
</template>
<template v:slot:page>
<p>这里还是slot内容-page</p>
</template>
</Test>
</div>
</template>
<script>
import Test from './Test';
export default {
name: 'HelloWorld',
components: {
Test
},
}
</script>
v-slot:header可以简写成#header
React 怎么写
React还真没有特定为这个场景定义什么方法或者属性，不过使用props向子组件传递也是够用的
class HelloWorld extends Component {
render() {
return (
<Test header="这里是slot内容-header">
这里是slot内容-page
</Test>
)
}
}
三、作用域插槽
如果你想要访问 Test 组件中的属性，那么可以使用作用域插槽，我没想明白什么场景下会这样用呢，如果需要访问子组件中的属性，那就把内容写到子组件里呗，何必要在父组件里定义呢
那如果想访问子组件Test的作用域该怎么办呢？
我们把需要传递的内容绑到 <slot> 上，然后在父组件中用v-slot设置一个值来定义我们提供插槽的名字，然后在HelloWorld.vue中接收传过来的值：
<!-- Test.vue -->
<template>
<div>
<h1>这里是非slot内容</h1>
<h2>
<slot name="header" v-bind:userInfo="user"></slot>
</h2>
<p>
<slot name="page"></slot>
</p>
</div>
</template>
<script>
export default {
name: 'Test',
props: {
},
data: () => {
return {
user:{
firstName:"Fan",
lastName:"Jun"
}
}
}
}
</script>
<!--HelloWorld.vue-->
<template>
<div class="hello">
<Test>
<template v-slot:header="slotProps">
这里是slot内容{{ slotProps.userInfo.firstName }}
</template>
<template #page>
<p>这里还是slot内容</p>
</template>
</Test>
</div>
</template>
<script>
import Test from './Test';
export default {
name: 'HelloWorld',
components: {
Test
},
}
</script>
v-slot:header="slotProps" 可以简写成 #header="slotProps"
绑定在 <slot> 元素上的特性被称为插槽 prop。在父组件中，我们可以用v-slot 设置一个值来定义我们提供的插槽 prop 的名字，然后直接使用就好了
Emm...先写这么多吧，等我再项目中有使用场景了再来补充，昨天看着很复杂很深奥，今天手敲了一遍代码之后觉着这个slot API是不是有点鸡肋啊，搜索了我们项目代码并没有发现有啥使用场景哎。。。
网友评论