摘要：我需要<slot>从子组件中设置 a 的内容的样式。我正在使用作用域 css 并且样式不适用：
我有以下两个组件：
<!-- Parent.vue -->
<template>
<h1>{{ msg }} from Parent</h1>
<Child>
<h1>{{ msg }} from Child</h1>
</Child>
</template>
...
<style scoped>
h1 {
color: green;
}
</style>
<!-- Child.vue -->
<template>
<slot></slot>
</template>
...
<style scoped>
h1 {
color: red;
}
</style>
我希望第二个<h1>是红色的，但它是绿色的，因为该组件是用如下内容渲染的：
<h1 data-v-452d6c4c data-v-2dcc19c8-s>Hello from Child</h1>
<style>
h1[data-v-452d6c4c] {
color: green;
}
h1[data-v-2dcc19c8] {
color: red;
}
</style>
data-v-452d6c4c来自Parent，data-v-2dcc19c8-s来自Child
如果标签中的第二个属性<h1>只是data-v-2dcc19c8我想要应用的样式，但由于它具有该-s …
我有一个警报组件
<template>
<div class="notification is-light" :class="type" :style="cssProps">
<button @click="emitClose" class="delete"></button>
<slot></slot>
</div>
</template>
我希望能够通过插槽将 HTML 传递到其中，以便我可以准确定义警报的外观，例如
<Alert v-if="showError" @close="showError = false" maxWidth="600px">
<span>The next words <b>are bold</b> because of the b tag</span>
</Alert>
我传递到槽的文本呈现为 HTML，并且标签按预期工作。
但是，我想要传递警报的文本将根据 API 的响应动态生成，因此我尝试执行以下操作
//somewhere in my component javascript
this.error = '<span>Error connecting to your account. Try <b>closing this window</b></span>'
然后我按如下方式调用该组件
<Alert>{{error}}</Alert>
这将呈现纯文本，包括 html 标签，而不是像第一个示例中那样呈现 html 标签。
我怎样才能实现这个目标？
是否可以在插槽上设置属性，并且父元素中的元素获取这些属性？
家长
<vDropdown>
<button slot="button">new button</button>
<ul>content</ul>
</vDropdown>
下拉菜单.vue
<div>
<slot name="button" aria-haspopup="true">
//fallback
<button aria-haspopup="true">Default Button</button>
</slot>
<div id="name" :aria-expanded="expanded">
<slot />
</div>
</div>
按钮的输出没有任何属性......
<div>
<button>new button</button>
<div id="myDropdown" aria-expanded="false">
<ul>content</ul>
</div>
</div>
所以我有这个<Dialog />扩展 vuetify<v-dialog />默认值的组件。
为了避免必须将onClose方法传递给DialogContent组件，我宁愿它$emit('close')。
但我无法让我的插槽监听此事件。:(
这是代码：
// Dialog.vue
<template>
<v-dialog
v-bind="$attrs"
v-model="dialog"
>
<!-- forward other slots -->
<template
v-for="(_, slot) of otherSlots"
v-slot:[slot]="scope"
>
<slot :name="slot" v-bind="scope" />
</template>
<template v-slot:default="{ on, attrs }">
<slot name="default" v-on="on" v-bind="attrs" @close="onClose" />
</template>
</v-dialog>
</template>
<script>
import {reject} from '@/utils/object';
export default {
inheritAttrs: false,
computed: {
otherSlots() {
return reject(this.$scopedSlots, 'default');
},
},
data() {
return {
dialog: false, …