在 Vue 中是使用插槽

属性传值

先写一段简单的代码

<div id="root"><child content="<p>Dell</p>"></child>
</div>
Vue.component('child', {props: {content:String},template: `<div><p>hello</p><div v-html="this.content"></div></div>`,
})
let vm = new Vue({el: '#root'
})

这种写法有两个问题：

p标签外面会有一层div，这个div是无法去掉的，有人会想，能不能用template代替，其实是不可以的，在这里模版站位符是不能用的。
如果content传递的内容很多，代码就会变得很难阅读。

当我的子组件有一部分内容，是根据父组件传递过来的dom进行显示的话，这时候可以换一种语法。

插槽`slot`

<div id="root"><child><p>Dell</p>     //这种语法看起来非常像，用子组件，我向里插入内容</child>
</div>
Vue.component('child', {props: {content:String},template: `<div><p>hello</p><slot></slot>       //slot 标签显示的内容就是父组件向子组件插入进来的内容</div>`,
})
let vm = new Vue({el: '#root'
})

<p>Dell</p>这种语法看起来非常像，用子组我向里插入内容，所以我们把它叫做插槽。

slot标签显示的内容就是父组件向子组件插入进来的内容。

通过插槽可以更方便的向子组件传递dom元素，同时子组件只需通过slot来使用就可以了。

`slot`其他功能

如果子组件里没有dom元素，可以让它显示默认内容，如下：

<slot>默认内容</slot>

具名插槽

如果现在有个需求是，header和footer是由外部引入的该怎么弄呢？如下

<div id="root"><body-content><div class="header" slot="header">header</div><div class="footer" slot="footer">footer</div></body-content>
</div>
Vue.component('body-content', {props: {content:String},template: `<div><slot name="header"></slot><div class="content">content</p><slot name="footer"></slot></div>`,
})
let vm = new Vue({el: '#root'
})

slot标签name属性对应的是组件中slot属性，通过这种写法，可以在调用子组件时，一次性传递多个区域的dom结构，在子组件里通过具名插槽来分别使用不同部分的dom结构

在 Vue 中是使用插槽相关推荐

vue中slot（插槽）详解，slot、slot-scope和v-slot
slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是组件的一块 ...
Vue 中的作用域插槽
作用域插槽 <div id="root"><child></child> </div> Vue.component('child', ...
vue中的slot插槽
1.无名插槽<body><div id="app">123</div><script src="https://cdn.jsde ...
Vue中的solt插槽
一.概念: 插槽就是父组件往子组件中插入一些内容. 二.插槽的种类: 有三种方式,默认插槽,具名插槽,作用域插槽默认插槽就是把父组件中的数据,显示在子组件中,子组件通过一个slot插槽标签显示父组件 ...
vue 中的solt插槽
插槽的种类: 插槽分为3种,一种是默认插槽.一种是具名插槽.一种是作用域插槽. 插槽的定义: 在子组件中用 <solt></solt> 划出一块区域用来显示父组件中的页面结构, ...
「后端小伙伴来学前端了」关于 Vue中 Slot 插槽的使用，实用且也是组件中必会的一个知识，另外也可以实现父子组件之间通信
前言插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些.更多时候也会更加方便. 今天介绍Vue中三种插槽吧:默认插槽.具名插槽.作用 ...
Vue中的v-slot详解，作用域插槽和具名插槽
1.具名插槽有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场. //组件调用时 <MyFooter v-red :age.sync="age"> ...
Vue 中 slot插槽的使用
Vue 中 slot插槽的使用插槽就是子组件提供给父组件使用的一个占位符,用<slot></slot>表示, 父组件可以在这个占位符填充任何模板代码,如HTML.组件等,填 ...
Vue中slot的使用(具名插槽与作用域插槽)
文章目录前言一.什么是插槽二.前期准备三.具名插槽的使用 1.子组件配置slot 2.使用者App.vue配置数据 3.结果展示 4.具名插槽总结四.作用域插槽的使用 1.子组件配置slot ...
vue中插槽solt的使用
solt就是插槽默认会把组件中间的内容渲染出来案例: 在app.vue中直接在组件模版里写内容是不会在页面中显示的这个时候就在card子组件里写上solt标签 solt标签就代表根组件里 ...

在 Vue 中是使用插槽

属性传值

插槽`slot`

`slot`其他功能

具名插槽

在 Vue 中是使用插槽相关推荐

最新文章

热门文章

在 Vue 中是使用插槽

属性传值

插槽slot

slot其他功能

具名插槽

在 Vue 中是使用插槽相关推荐

最新文章

热门文章

插槽`slot`

`slot`其他功能