vue.js - 将标记注入(inject)现有的 Vue 组件

Question

我想将标记注入(inject)现有组件。

这是一个简单的例子:

<!-- Arbitrary component X -->
<template>
  <div>
    <!-- I want a headline here -->
    foo!
  </div>
</template>

我知道我可以通过插入 <slot/> 来实现这一点然后使用 <X><h1>Hello world!</h1></X> .但是，我想动态地不编辑原始组件。

所以这是我使用高阶组件的想法:

import X from '~/components/X';
import injectHeadline from '~/hoc/injectHeadline.js';

export default {
  components: {
    X: injectHeadline(X, 'Hello world!')
  }
}

与

<!-- injectHeadline.js -->
export default (component, headline) => Vue.component({
    render(createElement) {
        let result = createElement(component);

        <!-- (*) somehow insert <h1>{{ headline }}</h1> here. How? -->

        return result;
    }
})

但是，我没有运气在 (*) 中操纵渲染结果。 .我试着摆弄 result.context.$children ，但这无处可去。 任何的想法？

Answer 1

可以使用与 React 中相同的模板扩展方法，在 VNode 呈现给 DOM 之前修改 VNode 的层次结构，如 this answer 中所述。 :

export default (WrappedComponent, headline) => Vue.component({
  extends: WrappedComponent,
  render(h) {
    const elements = this.$options.extends.render.call(this, h);
    elements.children.unshift(<h1>{headline}</h1>));
    return elements;
  }
});