.vue 파일 내에서 렌더 기능을 사용할 수 있습니까?

.vue 파일 내에서 렌더 기능을 사용할 수 있습니까?

컴포넌트의 html 태그를 동적으로 설정하려고 합니다.예:

  components: {
    test: {
      props: ['tag', 'attributes'],
      render(createElement) {
        return createElement(this.tag || 'div', {attrs: this.attributes || {}}, this.$slots.default);
      }
    }
  }

그러면 html 파일에서 다음과 같은 코드를 사용할 수 있습니다.

<test tag="a" :attributes="{href:'http://www.google.com'}">a tag content</test>
<test tag="p">p tag content</test>

이제 Vue Loader와 같은 기능을 사용하여 컴포넌트를 분할합니다.기본적으로 다른 컴포넌트를 다른 파일로 분할하여 main.js 파일을 사용하여 Import합니다.

다음과 같이 시도했지만 작동하지 않습니다.

// components/test.js 
export default {
  components: {
    test: {
      props: ['tag', 'attributes'],
      render(createElement) {
        return createElement(this.tag || 'div', {attrs: this.attributes || {}}, this.$slots.default);
      }
    }
  }
}

// main.js
import Vue from 'vue'  // don't think this is relevant, but it's there
import Test from './components/Test.js'
new Vue({
    el: '#app',
    components: {
        Test
    }
})

이것은 생각대로 되지 않는다.

어떻게 작동시키는지 알아?

고마워요.

Structure test.js는 다음과 같습니다.

export default {
      props: ['tag', 'attributes'],
      render(createElement) {
        return createElement(this.tag || 'div', {attrs: this.attributes || {}}, this.$slots.default);
      }
}

언급URL : https://stackoverflow.com/questions/44006573/can-i-use-a-render-function-inside-a-vue-file