我可以将自定义视图组件注入 Vue.js 网格组件吗？

Question

我在Vue.js中有一个数据网格组件，它看起来有点像官方示例中的那个：http://vuejs.org/examples/grid-component.html

基于输入数据而不是纯字符串，有时我想将条目 "decorated" 显示为复选框或 v-link 组件（不完全是，我可能需要渲染其他组件，如未转义的 HTML 或 img).

显然我不想为所有用例准备网格组件，所以这不是我想做的：

要显示的示例数据模型：

model = [
  {
    field1: 'some string',
    field2: 'another string',
    field3: { // this should be a checkbox
      state: true
    },
    field4: { // this should be an <a v-link>
      url: 'http://whatever',
      label: 'go somewhere'
    }
  }
]

网格组件的相关摘录：

<template>
  ...
    <tr v-for="entry in model">
      <td>
        <div v-if="typeof entry === 'object' && entry.hasOwnPropery('url')">
          <a v-link="entry.url">{{ entry.label }}</a>
        </div>
        <div v-if="typeof entry === 'object' && entry.hasOwnProperty('state')">
          <input type="checkbox" v-model="entry.state">
        </div>
        <div v-else>
          {{ entry }}
        </div>
      </td>
    </tr>
  ...
</template>

将自定义组件作为装饰器注入的 Vue.js 理念是什么？我希望我的网格对这些装饰器组件完全不可知。

Answer 1

这是放置可变组件的好地方。您定义了几个不同的装饰器组件，然后使用您的数据来决定应该使用哪一个进行渲染。

模板：

<div id="app">
<ul>
    <li
    v-for="entry in entries"
    >
    <component :is="entry.type">
        {{ entry.content }}
    </component>
    </li>
</ul>
</div>

组件：

new Vue({
  el: '#app',
  components: {
    'blank': {
      template: '<div><slot></slot></div>'
    },
    'green': {
      template: '<div style="color: #0f0;"><slot></slot></div>'
    },
    'red': {
      template: '<div style="background-color: #f00;"><slot></slot></div>'
    }
  },
  computed: {
    entries: function() {
      return this.raw_entries.map(
        function(entry) {
          if (typeof entry !== "object") {
            return { type: 'blank', content: entry }
          }

          if (!entry.hasOwnProperty('type')) {
            entry.type = 'blank'
          }

          return entry
        }
      )
    }
  },
  data: {
    raw_entries: [
      'Base Text',
      {
        type: 'green',
        content: 'Green Text'
      },
      {
        type: 'red',
        content: 'Red Background'
      }
    ]
  }
})

JsFiddle 使用列表的工作示例

我可以将自定义视图组件注入 Vue.js 网格组件吗？

Can I inject custom view components into a Vue.js grid component?

components

decorator

vue.js