Vue 中如何构建自己的抽象组件？

Question

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。事实上，指令相当不灵活，不能做一些复杂的操作。例如，指令不能触发事件。那么怎么解决这一问题呢？答案是使用抽象组件！

抽象组件与普通组件类似，只是它们不向 DOM 呈现任何内容。他们只是添加额外的行为。

<div class="container">
  <foo>
    <p>hello</p>
  </foo>
</div>

抽象组件 foo 并不能显示任何DOM元素，只是添加一些额外的功能。

<div class="container">
  <p>hello</p>
</div>

vue内置的抽象组件有 <transition>，<component> 和 <slot> 等等。

export default {
  // 在 Vue 中启用抽象组件
  abstract: true,
  // 我们不需要任何包裹的元素，只需要返回里面的内容即可
  render() {
    try {
      return this.$slots.default[0];
    } catch (e) {
      throw new Error('没有内容');
    }
    return null;
  },
  methods: {
    // 在这里使用$emit派发事件...
  }
}

更多抽象组件用法可以参考这里：传送门。