Vue插槽使用

发表于 更新于 分类于 本文字数： 1.8k 阅读时长 ≈ 2 分钟

有一个组件grid01，通常使用它 : <grid01></grid01>，假如我们想在标签里面渲染内容：<grid01><h1>你好</h1></grid01>，这时就可以使用插槽。

基础用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Vue.component("grid01",{
	template:`
		<div>
			<h1>你好</h1>
			<slot></slot>
		</div>
	`
});

let vm = new Vue({
	el: "#app",
	data: {},
	template:`
		<div id="app">
			<grid01>
				<p>大海</p>
			</grid01>
		</div>
	`
})
1.<p>大海</p>会渲染到组件 grid01 中的slot插槽里面
2.插槽的位置改变，即渲染的内容位置改变

进阶用法

1.组件的插槽个数没有限制
2.可以通过name属性给 slot 设置名字
3.组件可以设置一个不带名字的 slot 作为默认插槽
4.可以在 slot 的标签中给 slot 设置默认内容，当没有内容插入时自动渲染
5.插槽模板内容中使用的数据或方法属于哪个组件？
    这个插槽模板写在哪，就属于哪。
6.有时候插槽模板需要使用来自组件本身的数据
    6.1 给插槽加一些属性，除name之外
        <slot abc="哈哈" kl="最好"></slot>
    6.2 在插槽模板内容的标签上，定义 slot-scope="obj"
    6.3 obj是一个对象{ abc:"哈哈", kl: "最好"}，此时可使用obj.abc来使用参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Vue.component("grid01",{
   data(){
     return {
       money:56
     }
   },
   template:`
     <div>
       <h1>你好</h1>
       <slot></slot>
       <slot name="mid" :count="money"></slot>
       <slot name="bottom"></slot>
     </div>
   `
});

 let vm = new Vue({
   el: "#app",
   data: {},
   template:`
     <div id="app">
       <grid01>
         <p slot="mid">大海</p>
         <p slot="top">蓝天</p>
         <p>插入默认插槽</p>
         <p>也会插入默认插槽</p>
       </grid01>
     </div>
   `
 })

Vue2.6中指定插槽使用v-slot这样写: 

1
2
3
4
5
6
7
8
9
10
11
12
13
let vm = new Vue({
  el: "#app",
  data: {},
  template:`
    <div id="app">
      <grid01>
      <template v-slot:top="obj">
        <p>大海,{{ obj.money }}</p>
      </template>
      </grid01>
    </div>
  `
})
​ 注意：

  1. v-slot 必须在一个 template 标签中使用

  2. v-slot:top表示指定插槽为top