[英]VueJS : Getting innerHTML of custom component
I am trying to build very simple bootstrap alert component but Iam unable to figure out how to get innerHTML
of my custom component.我正在尝试构建非常简单的引导警报组件,但我无法弄清楚如何获取我的自定义组件的innerHTML
。
Code:代码:
Vue.component('my-alert', {
template: '#vue-alert',
props: ['type', 'title', 'message'],
created: function() {
this.message = this.innerHTML; // <---- NOT WORKING
}
});
var vm = new Vue({
el: 'body'
});
HTML: HTML:
<my-alert type="success" title="Important">My Message here.</my-alert>
I want to show the component whatever text is provided in it, in this case it should show My Message here.
我想显示组件中提供的任何文本,在这种情况下,它应该My Message here.
Okay I figured out, I needed to use the <slot></slot>
.好的,我想通了,我需要使用<slot></slot>
。
<template id="vue-alert">
<div v-if="show" class="alert alert-{{type}} alert-dismissible" role="alert">
<button @click="removeAlert" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<strong>{{title}}!</strong> <slot></slot>
</div>
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.