[英]Injecting html - using slot or v-html?
所以这是我的情况:
我通过以下方式创建模式:
<Modal id="modal">
<my-component></my-component>
</Modal>
现在,我希望模态中的内容是动态的,因此可以放入<input>
或<table>
或w / e。 我已经尝试使用插槽(它可以工作),但它并不是动态的。 我想知道我是否错过了一些可以让广告位更具动态性的事情。
这是我的模态设置的方式:
<div
:id="id"
class="main"
ref="main"
@click="close_modal"
>
<div ref="content" class="content" :style="{minHeight: height, minWidth: width}">
<div ref="title" class="title" v-if="title">
{{ title }}
<hr/>
</div>
<div ref="body" class="body">
<slot></slot>
</div>
</div>
</div>
我认为使用插槽是一个不错的选择。 在2.5版中引入了slot-scope
时,您基本上获得了反向属性功能,您可以在子组件中设置默认值并在父组件中访问它们。 当然,它们是完全可选的,您可以自由地在插槽中放置任何您喜欢的内容。
这是一个示例组件,可让您根据需要自定义页眉,正文和页脚:
// MyModal.vue
<template>
<my-modal>
<slot name="header" :text="headerText"></slot>
<slot name="body" :text="bodyText"></slot>
<slot name="footer" :text="footerText"></slot>
</my-modal>
</template>
<script>
export default {
data() {
return {
headerText: "This is the header",
bodyText: "This is the body.",
footerText: "This is the Footer."
}
}
}
</script>
// SomeComponent.vue
<template>
<div>
<my-modal>
<h1 slot="header" slot-scope="headerSlotScope">
<p>{{ headerSlotScope.text }}</p>
</h1>
<div slot="body" slot-scope="bodySlotScope">
<p>{{ bodySlotScope.text }}</p>
<!-- Add a form -->
<form>
...
</form>
<!-- or a table -->
<table>
...
</table>
<!-- or an image -->
<img src="..." />
</div>
<div slot="footer" slot-scope="footerSlotScope">
<p>{{ footerSlotScope.text }}</p>
<button>Cancel</button>
<button>OK</button>
</div>
</my-modal>
</div>
</template>
<script>
import MyModal from './MyModal.vue';
export default {
components: {
MyModal
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.