props是用来接收参数的 例如父组件向子组件传参 可以放在props中
slot:插槽 slot分发模式主要用于在组件中插入标签或者组件之间的相互嵌套,个人认为如果组件中有需要单独定义的地方可以使用slot
例子:
现在父组件中占个位置
<template id="a">
<div>hello!</div>
<slot>没有内容 就显示这个</slot>
</template>
var a = vue.extend({
template: '#a'
})
子:
<div id="child">
<A></A>
<hr/>
<A>
<h1>内容1</h1>
<h1>内容2</h1>
</A>
</div>
var child = new Vue({
el: '#child',
components: {
"A":A
}
})
结果:
hello!
没有内容 就显示这个
hello!
内容1
内容2
<template id="b">
<slot name="slot1"></slot>
<slot></slot>
<slot name="slot2"></slot>
</template>
var B = Vue.extend({
template: "#b"
});
<div id="child2">
<B>
<div slot="slot1">this is slot01</div>
<div slot="slot2">this is slot02</div>
<div>aaa</div>
<div>bbb</div>
</B>
</div>
var child2 = new Vue({
el: "#child2",
components: {
"B": B
}
});
结果:
this is slot01
aaa
bbb
this is slot02
子=> 父
子:
<slot name="b" :msg="hello"></slot>
父:
<template slot="b" **slot-scope**="props">
<child>
<div class="">
{{props.msg}}
</div>
</child>
</template>
作用域插槽更典型的用例是在列表组件中,允许使用者自定义如何渲染列表的每一项:
<mylist :items="items">
<!-- 作用域插槽也可以是具名的 -->
<li
slot="item"
slot-scope="props"
class="my-fancy-item">
{{ props.text }}
</li>
</mylist>
列表组件的模板:
<ul>
<slot name="item"
v-for="item in items"
:text="item.text">
<!-- 这里写入备用内容 -->
</slot>
</ul>
来源:https://segmentfault.com/a/1190000012314707
插槽用于内容分发,存在于子组件之中。插槽作用域:父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪。子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据。
vue 为我们提供了很多复用性的方式,slot 和 mixins 就是其中两种...下面对这两种方式做一下记录,插槽使用场景- 该组件被多个地方使用- 每个父组件中对该组件的内部有一部分需要特殊定制
最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清晰的可读性。 真正有能力的插槽是什么?
vue将 <slot> 元素作为承载分发内容的出口,当组件渲染的时候,<slot></slot> 将会被替换该组件起始标签和结束标签之间的任何内容
Vue 代码中的 slot 是什么,简单来说就是插槽。 <slot> 元素作为组件模板之中的内容分发插槽,传入内容后 <slot> 元素自身将被替换。看了上面这句官方解释,可能一样不知道 slot 指的是什么
首先来思考一个问题:是否有一种方法可以从子组件填充父组件的插槽?最近一位同事问我这个问题,答案很简单:可以的。但我的解决方案可能和你想的完全不一样,这是涉及一个棘手的Vue架构问题
Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!