javascript - 创建一个模板部分中没有任何内容的 Vue.JS 组件

Question

我正在尝试使用 vue-iziToast在页面顶部抛出通知。由于我对所有通知使用相同的样式，因此我决定以组件的形式使用它，而不是一遍又一遍地重写代码...... 我的问题:要在 vue 中创建一个组件，我在 main.js 中声明它，创建一个包含所有内容的页面，然后，我仅通过创建一个具有该名称的 html 标签来使用它所述组件。

vue-iziToast 完全发生在组件的脚本部分中。我只需在应该触发它的方法中添加这一行:

this.$toast.success( this.notificationMessage , 'OK', VueIziToast.options.success);

我在前面的代码中定义了成功，如下所示:

  VueIziToast: {
    options: {
      success: {
        position: "topCenter",
        color: "#eaeaea",
        messageColor: "success",
        messageSize: 18
      }
    }
  },
  notificationMessage: "It's ALIVE!!"

这在页面中工作得很好，但是要将其作为组件移动，我无法创建没有 html 部分的组件。如果没有任何 html 模板，我将如何调用它？

Answer 1

有可能mixins在这种情况下将有助于实现所需的行为。

不过，回答这个问题:也可以创建一个不渲染任何 html 的组件，但仍然具有所有组件的 API。

这是此类组件的一个简单示例。可以导入并注册为SFC :

export default {
  name: 'RenderlessComponent',
  render: () => null,
  data () { 
    return {} 
  },
  methods: {},
  mounted() {}
};

使用示例: