Vue嵌套自定义组件范围

Question

我想要创建一组可重用的实用程序/非ui组件，通过允许它成为：

• 附加到http数据源
• 已排序
• 分页
• 过滤等

我希望我在使用它时拥有的代码如下：

<my-app>
  <data-table :url="url">
    <table>
      <thead>
        <tr>
          <dt-th sort-key="name">Name</dt-th>
          <dt-th sort-key="surname">Surname</dt-th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in data">
          <td>{{ row.name }}</td>
          <td>{{ row.surname }}</td>
        </tr>
      </tbody>
    </table>
  </data-table>
</my-app>

上面的代码最大的问题是Vue在MyApp组件中查找，以解决dt-th元素、data表达式等问题。

你可以在这里找到我的伪应用程序：https://plnkr.co/edit/30Z7L3zrfrGmED17QrIh?p=preview

Answer 1

您的数据问题可以使用作用域槽解决。

const DataTable = {
  components: {
    'dt-th': DataTableHeaderCell
  },
  props: ['src'],
  data () {
    return {
      data: [
        { name: 'Gale', surname: 'Marlon' },
        { name: 'Corwin', surname: 'Hayden' }
      ]
    }
  },
  created () {
    EventBus.$on('sort', this.sort)
  },
  methods: {
    sort (sortKey) {
      console.log(`Sorting by ${sortKey}`)
    }
  },
  template: `
    <div><slot :rows="data"></slot></div>
  `
}

你的模板变成

<data-table :src="src">
  <template scope="{rows}">
    <table>
      <thead>
        <tr>
          <dt-th sort-key="name">Name</dt-th>
          <dt-th sort-key="surname">Surname</dt-th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows">
          <td>{{ row.name }}</td>
          <td>{{ row.surname }}</td>
        </tr>
      </tbody>
    </table>
  </template>
</data-table>

要解决您的dt-dh问题，可以将其公开给Vue。

const DataTableHeaderCell = {
  props: ['sort-key'],
  methods: {
    emit () {
      EventBus.$emit('sort', this.sortKey)
    }
  },
  template: `
    <th @click="emit"><slot></slot></th>
  `
}

Vue.component("dt-th", DataTableHeaderCell)

这是你的柱塞更新。

另一种选择是通过作用域传递DataTableHeaderCell的定义。

const DataTable = {
  props: ['src'],
  data () {
    return {
      data: [
        { name: 'Gale', surname: 'Marlon' },
        { name: 'Corwin', surname: 'Hayden' }
      ], 
      DataTableHeaderCell
    }
  },
  created () {
    EventBus.$on('sort', this.sort)
  },
  methods: {
    sort (sortKey) {
      console.log(`Sorting by ${sortKey}`)
    }
  },
  template: `
    <div><slot :rows="data" :header="DataTableHeaderCell"></slot></div>
  `
}

在你的模板里

<data-table :src="src">
  <template scope="{rows, header}">
    <table>
      <thead>
        <tr>
          <th :is="header" sort-key="name">Name</th>
          <th :is="header" sort-key="surname">Surname</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows">
          <td>{{ row.name }}</td>
          <td>{{ row.surname }}</td>
        </tr>
      </tbody>
    </table>
  </template>
</data-table>

下面是这方面的示例。