기존 Vue 컴포넌트에 마크업 삽입

기존 Vue 컴포넌트에 마크업 삽입

기존 부품에 마크업을 삽입하고 싶습니다.

다음은 간단한 예입니다.

<!-- 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하지만 그건 아무 의미도 없어요감 잡히는 게 없어요?

템플릿 확장에 대해서는 React와 같은 접근방식을 사용하여 VNode가 DOM에 렌더링되기 전에 계층을 변경할 수 있습니다(다음 답변 참조).

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;
  }
});

그렇게 단순한

<script>
export default {
  functional: true,
  render: function(createElement, context) {
    return createElement("div", context.slots().default);
  }
};
</script>

퍼포먼스를 위해 기능하도록 설정했습니다(이 경우 vnode는 필요 없습니다).

당신의 코드로 당신은 이렇게 할 수 있다.

let result = createElement(component,this.$slots.default);

언급URL : https://stackoverflow.com/questions/56697228/inject-markup-into-existing-vue-component