메서드 내 Vuejs 빌드/렌더 컴포넌트와 템플릿 출력

메서드 내 Vuejs 빌드/렌더 컴포넌트와 템플릿 출력

컴포넌트명을 가진 문자열(예를 들어 키/값이 많은 오브젝트이기 때문에 htmloutput에 루프하여 부가하고 싶다)이 있습니다.메서드 내에 컴포넌트를 렌더링/빌드하여 html 출력을 표시할 수 있습니까?

그게 가능합니까? 어떻게 하면 달성할 수 있을까요?

     <template>
         <div v-html="htmloutput"></div>
     </template>


<script>
    export default {
        component: {
            ComponentTest
        },
    data() {
            return {
                htmloutput: ''
            }
        },
    methods:{
        makeHtml(){
            let string = 'component-test';//ComponentTest
            //render the ComponentTest directly
            this.htmloutput = ===>'HERE TO RENDER/BUILD THE COMPONENTTEST'<==
        }
    },
    created(){
            this.makeHtml();
    }
</script>

동적 구성 요소를 찾을 수 있습니다.

https://vuejs.org/v2/guide/components-dynamic-async.html

예제:

<template>
    <component :is="changeableComponent">
    </component>
</template>

<script>
    import FirstComponent from '@/views/first';
    import SecondComponent from '@/views/second';

    export default {
        components: {
            FirstComponent, SecondComponent
        },
        computed: {
            changeableComponent() {
                // Return 'first-component' or 'second-component' here which corresponds
                // to one of the 2 included components.
                return 'first-component';
            }
        }
    }
</script>

예, 다음 예시는 렌더 함수를 사용할 수 있습니다.

Vue.component('CompnentTest', {
  data() {
    return {
      text: 'some text inside the header'
    }
  },
  render(createElement) {
    return createElement('h1', this.text)
  }
})

new Vue({
  el: '#app',

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <Compnent-test />
</div>

또는 다음과 같습니다.

사용하시는 경우Vue-cli:

에componentTest컴포넌트:

export default {
  render(createElement) {
    return createElement('h1', 'sometext')
  }
  // Same as
  // <template>
  //   <h1>sometext</h1>
  // </template>
  //
}

루트 요소(App.vue디폴트로) :

export default {
   ....
  component: {
    ComponentTest
  }
}

<template>
  <div>
      ....
     <Component-test />
  </div>
</template>

예: codesandbox

Render Functions & JSX에 대한 자세한 내용은 이쪽에서 확인하실 수 있습니다.

이게 도움이 될 수도 있어요- https://forum.vuejs.org/t/how-can-i-get-rendered-html-code-of-vue-component/19421

Star Rating은 샘플 Vue 컴포넌트입니다.실행으로 HTML 코드를 얻을 수 있습니다.

new Vue({
  ...StarRating,
  parent: this,
  propsData: { /* pass props here*/ }
}).$mount().$el.outerHTML

당신의 방식대로.에 대해서import Vue from 'vue';물론 컴포넌트를 Import합니다.

네가 하려는 일은 정말 Vue에게 최선의 방법이 아니야.

사용하는 것이 좋다v-if그리고.v-for컴포넌트를 조건부로 렌더링합니다.<template>부분.

언급URL : https://stackoverflow.com/questions/57431205/vuejs-build-render-component-inside-a-method-and-output-into-template