VueJS:如何获取自定义组件的内部HTML?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (864)

我正在尝试构建非常简单的引导警报组件,但是我想不出如何获得innerHTML我的定制组件。

代码:

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:

<my-alert type="success" title="Important">My Message here.</my-alert>

我想向组件显示它所提供的任何文本,在这种情况下,它应该显示My Message here.

提问于
用户回答回答于

好吧,我想,我需要用<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">&times;</span>
  </button>
  <strong>{{title}}!</strong> <slot></slot>
  </div>
</template>

扫码关注云+社区

领取腾讯云代金券