[英]Why isn't my scoped slot displaying anything?
I'm trying to use Vue's scoped slots :我正在尝试使用 Vue 的作用域插槽:
App.vue:应用程序.vue:
<template>
<div id="app">
<b-grid>
<slot name="col" :col="2">
<p>Some test</p>
</slot>
</b-grid>
</div>
</template>
BGrid.vue BGrid.vue
<template>
<div class="b-grid">
<div class="container">
<div class="row">
<template slot="col" scope="props">
<div :class="'col' + props.col">This is a column</div>
</template>
</div>
</div>
</div>
</template>
However, the slot is displayed on the page.但是,该插槽显示在页面上。 No errors in the console:控制台中没有错误:
<div id="app">
<div class="b-grid">
<div class="container">
<div class="row"></div>
</div>
</div>
</div>
What am I doing wrong?我究竟做错了什么?
Note: I'm using Vue 2.3.4注意:我使用的是 Vue 2.3.4
You've got the syntax flipped.你已经翻转了语法。 You need to define a slot
tag in the child component:你需要在子组件中定义一个slot
标签:
<div class="b-grid">
<div class="container">
<div class="row">
<slot name="col" :col="2"></slot>
</div>
</div>
</div>
Then, in the parent component, use the template
tag with the slot
attribute to pass in the content to use for that slot:然后,在父组件中,使用带有slot
属性的template
标签来传递要用于该插槽的内容:
<div id="app">
<b-grid>
<template slot="col" scope="props">
<div :class="'col' + props.col">This is a column</div>
</template>
</b-grid>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.