vue-grid-layout 항목 내부에 구성 요소 전달

vue-grid-layout 항목 내부에 구성 요소 전달

vue-grid-layout 항목 내에 Import된 단일 파일 vue 구성 요소를 전달하는 방법을 알려 주십시오.

다음과 같은 간단한 html을 전달하는 방법은 알고 있습니다.https://jsfiddle.net/gmsa/jw2mmmpq/1/ 단, 버튼이나 액시우스 호출 등을 사용하여 다른 컴포넌트를 삽입해야 합니다.

HTML:

<template>
  <div class="hello">
    <grid-layout
            :layout="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
    >

      <grid-item v-for="item in layout"
                 :x="item.x"
                 :y="item.y"
                 :w="item.w"
                 :h="item.h"
                 :i="item.i">
        <div v-html="item.c">
        </div>
        <Test></Test>
      </grid-item>
    </grid-layout>
  </div>
</template>

JS:

import VueGridLayout from 'vue-grid-layout';
  import Test from './test.vue';
  import Test from './test2.vue';

  let a = `This needs to be another component, like Test`;
  let b = `This needs to be another component, like Test2`;

  var testLayout = [
    {"x":0,"y":0,"w":2,"h":2,"i":"0", "c": a},
    {"x":2,"y":0,"w":2,"h":4,"i":"1", "c": b}
  ];
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    Test,
    Test2
  },
  data: function (){
    return {
      layout: testLayout
    }
  }
}

아이디어를 찾을 수 없습니다.

https://github.com/jbaysolutions/vue-grid-layout

가장 큰 소리를 사용하여 시행될 수 있동적 구성 요소고 싶다.<component :is="component"></component>구문을 사용합니다.표시하는 항목이 모두 컴포넌트인 경우 다음과 같은 작업을 수행할 수 있습니다.

<grid-item v-for="item in layout"
             :x="item.x"
             :y="item.y"
             :w="item.w"
             :h="item.h"
             :i="item.i">
  <component :is="item.c"></component>
</grid-item>

JavaScript:

import VueGridLayout from 'vue-grid-layout';
import Test from './test.vue';
import Test2 from './test2.vue';
export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    Test,
    Test2
  },
  data: function (){
    return {
      layout: [
        {"x":0,"y":0,"w":2,"h":2,"i":"0", "c": 'Test'}, // component name used but you could also use a reference to the component
        {"x":2,"y":0,"w":2,"h":4,"i":"1", "c": 'Test2'}
      ];
    }
  }
}

일부 항목만 컴포넌트이고 일부는 플레인 HTML인 경우 레이아웃 배열의 컴포넌트인 플래그를 지정할 수 있습니다.

layout: [
        {"x":0,"y":0,"w":2,"h":2,"i":"0", "c": 'Test', isComponent: true},
        {"x":2,"y":0,"w":2,"h":4,"i":"1", "c": '<h1>Hello World</h1>', isComponent: false}
      ];

그런 다음 그리드 항목 슬롯에 구성 요소 또는 일반 HTML을 조건부로 렌더링합니다.

<grid-item v-for="item in layout"
             :x="item.x"
             :y="item.y"
             :w="item.w"
             :h="item.h"
             :i="item.i">
  <template>
    <component v-if="item.isComponent" :is="item.c"></component>
    <div v-else v-html="item.c"></div>
  </template>
</grid-item>

언급URL : https://stackoverflow.com/questions/54581808/pass-a-component-inside-a-vue-grid-layout-item