Vue 中插槽的理解与使用

it2024-06-26 45

Vue 中插槽的理解

一、什么是插槽二、插槽的默认值(后备内容)三、具名插槽(给插槽取具体的名字)四、作用域插槽

一、什么是插槽

看一下官方解释：Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将元素作为承载分发内容的出口。说实在我是没有看懂，通过这几天的学习，对插槽有了个步初步的认识，以下是个人理解(大佬们勿喷(^__) )：插槽，是组件对外暴露的占位符，这个占位符(slot)可以是html、其他组件。当父组件使用这个组件的时候，<子组件名称>这里的内容原封不动会传递到子组件的slot里面</子组件名称>。这样就可以实现父组件可以自定义的修改子组件里面的布局。看着有点晕，看个栗子就明白了

定义一个test组件，并且使用该组件 // An highlighted block <body> <div id="app">  <test></test> </div> </body> <script> // 定义一个test组件 Vue.component('test',{ template:` <div> 我是子组件 </div>`, }) var app = new Vue({ el:"#app" }); </script>

显示： 2. 插槽的使用<slot></slot>

<body> <div id="app">  <test>  <div> 我是从父组件过来的 </div> </test> </div> </body> <script> // 定义一个test组件 Vue.component('test',{ template:` <div> 我是子组件 <slot></slot> </div>`, }) var app = new Vue({ el:"#app" }); </script>

如果在子组件中不使用<slot></slot>标签的话，父组件里面的<div>内容是不会显示出来的以上就是对插槽的简单理解，再回过头看前面的理解，是不是恍然大悟很多呢

二、插槽的默认值(后备内容)

<body> <div id="app">  <test>   </test> </div> </body> <script> // 定义一个test组件 Vue.component('test',{ template:` <div> 我是子组件 <slot><div>当父组件没有任何html代码时，我使用插槽里面的默认代码</div></slot> </div>`, }) var app = new Vue({ el:"#app" }); </script>

三、具名插槽(给插槽取具体的名字)

当子组件里面有多个插槽时，可以给插槽添加属性进行区分<slot name="my-slot1"></slot><slot name="my-slot2"></slot>，在父类组件中使用 <template slot="my-slot">这里是html内容</template>把代码块包裹起来。

<body> <div id="app">  <test>  <template slot="my-slot"> <div> 我是从父组件过来的，使用插槽111111 </div> </template> <template slot="my-slot2"> <div> 我是从父组件过来的，使用插槽2222222 </div> </template> <div> 外部的数据是不会被写进子组件 </div> </test> </div> </body> <script> // 定义一个test组件 Vue.component('test',{ template:` <div> 我是子组件 <slot name="my-slot"> </slot> <slot name="my-slot2"> </slot> </div>`, }) var app = new Vue({ el:"#app" }); </script>

在2.6中使用<template v-slot:my-slot>、<template v-slot:my-slot2> 这样使用具名插槽，并且 v-slot 只能添加在 <template> 上

四、作用域插槽

既然父组件的html代码会替换到子组件的 slot 标签里，那我们是不是可以在父组件的html中使用子组件的数据呢？答案是否定的，报了错误作用域插槽的使用

<body> <div id="app">  <test>  <template v-slot:my-slot="props"> <div> <h1>{{props}}</h1> <h1>{{props.data}}</h1> </div> </template> </test> </div> </body> <script> // 定义一个test组件 Vue.component('test',{ data:function(){ return { childName:"子组件" }; }, template:` <div> 我是子组件 <slot name="my-slot" v-bind:data="childName"> </slot> </div>`, }) var app = new Vue({ el:"#app" }); </script>

这样就可以在父组件的<template>里面使用子组件里面的数据。先写到这后期补充。。。

最新回复(0)