Prerender vue.js 2.0 컴포넌트(이와 유사).vue 1로 $140)

Prerender vue.js 2.0 컴포넌트(이와 유사).vue 1로 $140)

그리드 스택을 위해 재사용 가능한 부품을 만들려고 합니다.

같은 일을 할 수 있는 간단한 방법을 찾을 수 없다.this.$compilevue 1의 메서드.나는 이 예를 본 적이 있다.

vue 스크립트는 다음과 같습니다.

export default {
  components: {
    'horizontal-fab': HorizontalFab,
    'd-widget': DWidget
  },
  data () {
    return {
  }
},
mounted () {
  var options = {
    cellHeight: 80,
    verticalMargin: 10,
    width: 3
  }
  $('#grid-stack').gridstack(options)
},

addWid () {
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget('<d-widget></d-widget>', 0, 0, 1, 1, true)
},

addGraph () {
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget(`
    <div class="grid-stack-item" data-gs-width="4">
      <div class="grid-stack-item-content">
        <p>HTML (added)</p>
      </div>
    </div>
  `, 0, 0, 1, 1, true)
}

다음은 관련 html입니다.

<span @click="addGraph" >Line graph</span></li>
<span @click="addWid">Sparklines</span></li>
...
<div id="grid-stack" class="grid-stack grid-stack-3">
  <d-widget data-gs-x="0" data-gs-y="0" data-gs-width="1" data-gs-height="1"></d-widget>
</div>

문제는 다음과 같습니다.

그 방법addGraph완벽하게 동작합니다.addWid- 없습니다.html에 직접 컴포넌트로 삽입해도 동작합니다.

컴포넌트의 html이 프리 컴파일 되어 있지 않기 때문에 그런 것 같습니다.에 의해 해결되었다.compile하지만 vue1에서는요.

내가 이미 시도한 것:

1. Mount여기에 제시된 바와 같이 정의된 컴포넌트를 볼 수 없었기 때문에 동작하지 않았던 것 같습니다.
2. 나는 그것을 작동시킬 수 있는 가능성이 있다는 것을 봐왔다.push, 여기에 제시된 바와 같이.그러나 아직까지는 충분한 지식이 없기 때문에 이러한 방식으로 작동하는 방법을 찾을 수 없습니다. 여러 유형의 블록이 있기 때문에 이러한 블록은 모두 그리드 스택에서 동일한 요소로 취급해야 하기 때문입니다.또한 동일한 컴포넌트를 다른 파라미터로 1개의 보드 내에서 여러 번 사용할 수 있습니다.
3. 컴파일 하는 방법이 있는 걸 봤어요standalone component여기처럼 추천하지 않는 것 같아서 다른 방법을 찾고 있어요.
4. 나도 이런 거 봤어 render functions하지만 다시 말씀드리지만, 안타깝게도 제 실력은 그다지 뛰어나지 않습니다.

요약하자면, 이러한 방법에 대한 조언이나 구현 방법에 대한 권장 사항을 알려주시면 감사하겠습니다.문제는 요소만 삽입하는 것이 아니라 gridstack 스크립트에 의존해야 한다는 것입니다.

감사합니다!

UPD: d-widget 정의:

이는 기본적으로 위젯이라는 별도의 파일에 정의되어 있는 단일 구성 요소입니다.표시하다

<template>
<div class="grid-stack-item" data-gs-width="4">
    <div class="grid-stack-item-content">
        <p>Wiiidget! (added)</p>
    </div>
</div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
}
</script>

마운트를 사용하면 전달해야 할 것을 얻을 수 있습니다.grid.addWidget.

우선 컴포넌트를 조립할 수 있는 것으로 바꾸고 싶습니다.

const MyWidget = Vue.extend(DWidget);

그러면 그 컨스트럭터를 탑재할 수 있습니다.

const mounted = new MyWidget().$mount();

나는 아무 것도 주지 않는다.$mount()컴포넌트는 DOM에 추가되지 않습니다.생성된 요소에 액세스할 수 있습니다.mounted.$el이 정보를 전달해 주실 수 있을 것 같습니다.addWidget.

grid.addWidget(mounted.$el, 0,0,1,1,true);

그래서 @Bert의 제안대로 마운트를 사용해야 했습니다.그리고 그의 방법은 완벽하게 작동한다.다음으로 실제로 재사용 가능한 컴포넌트로 기능하는 addWid() 메서드를 나타냅니다.

addWid () {
  const MyWidget = Vue.extend(DWidget)
  const mounted = new MyWidget().$mount()
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget(mounted.$el, 0, 0, 1, 1, true)
}

그것이 누군가에게 도움이 되기를 바랍니다!

언급URL : https://stackoverflow.com/questions/43035128/prerender-vue-js-2-0-component-similar-to-this-compile-in-vue-1