Vue: Izinkan anak-anak untuk "mewarisi" komponen yang terdaftar untuk orang tua.

Adakah kasus penggunaan dunia nyata?

Dalam kasus penggunaan kecil, cukup daftarkan semuanya secara global; di aplikasi besar, setiap komponen jauh lebih mudah dipelihara untuk secara eksplisit bergantung pada apa yang dibutuhkannya. Ini mungkin berguna dalam beberapa situasi, tetapi manfaatnya datang dengan tradeoff global. Ide di balik 1.0 adalah bahwa "jika sesuatu hanya berguna sedikit, atau memiliki implikasi negatif pada pemeliharaan, mari kita hapus."

Ya. Aplikasi saya memiliki jendela sembulan yang memiliki struktur kompleks elemen editor khusus. Elemen-elemen ini dapat digabungkan dalam hierarki 3-4 level, sehingga tidak efisien untuk mendeklarasikannya secara eksplisit untuk setiap elemen induk (3-5 tipe induk * 10 elemen yang dideklarasikan = 50 baris kode berulang). Dan, itu juga tidak baik untuk mendaftarkan mereka secara global karena mereka tidak akan pernah muncul di bagian lain dari aplikasi. Jadi saya ingin mereka dimuat "secara lokal".

Mengimpornya secara eksplisit adalah pengulangan yang berharga. Ini memungkinkan Anda untuk melihat komponen apa pun dalam hierarki itu sendiri dan memahami dari mana dependensinya berasal. Dengan fallback implisit, Anda tidak akan ingat di mana Anda mengimpor komponen tersebut dalam hierarki 3 bulan kemudian.

@yyx990803 Saya memiliki ingatan yang baik, terima kasih. Jadi saya akan ingat bahwa aplikasi saya terdiri dari dua bagian yang sangat berbeda, masing-masing mendaftarkan sekumpulan komponen khusus untuk itu. Jadi saya lebih suka memiliki pilihan tempat memuat aset saya (dan saya menduga hal yang sama terjadi pada arahan dan filter khusus).

Biarkan saya berbagi kesan saya. Saya bekerja dengan 0.12.x dan itu berjalan SANGAT baik (dikurangi beberapa hal kurva belajar kecil). API minimalis dan bersih, sintaksis, kode andal. Sekarang, kami berada di 1.0.0-beta dan itu menjadi BURUK, bukan lebih baik. Lebih banyak pengulangan kode, fitur yang saya gunakan dihapus membuat saya menulis ulang kode yang sama berulang-ulang. Saya mulai berpikir saya membuat kesalahan memilih Vue daripada React, karena saya tidak yakin tidak akan ada lagi perubahan yang merusak dan membuang waktu saya di masa depan.

@karevn

1. Akan jauh lebih membantu jika Anda benar-benar mencantumkan hal-hal spesifik yang membuat pengalaman pengembang lebih buruk selain masalah ini.
2. 1.0.0-alpha adalah pra-rilis, yang berarti tidak ada jaminan stabilitas API sejak awal. Jika Anda menghargai stabilitas, Anda harus tetap menggunakan 0.12 dan menunggu stable 1.0 (yang juga akan memiliki rilis migrasi final). Menggunakan pra-rilis berarti Anda telah setuju untuk menangani perubahan yang terus-menerus melanggar.
3. 1.0.0-beta bahkan tidak dirilis. Mungkin bukan ide yang baik untuk menggunakan cabang yang tidak dirilis dan sedang dalam proses.
4. Saya merancang API berdasarkan pengalaman dan umpan balik saya dari seluruh komunitas. Anda berhak atas apa pun yang Anda pikirkan, dan jangan ragu untuk beralih ke kerangka kerja lain jika perubahannya tidak ke arah yang Anda suka. (Faktanya, di React Anda juga harus mengimpor semuanya secara eksplisit, dan harus mengulang lebih banyak hal lagi.)

1. Setelah membaca diskusi #1170 saya hampir setuju sekarang. Tapi .. Saya benar-benar tidak melihat gunanya menghapus kode yang ada yang menyediakan fitur ini daripada hanya membuat strict: true default. Selera berbeda, dan beberapa orang akan lebih memilih pendekatan "kebalikan", yang terkadang lebih intuitif. Terutama, ketika komponen dimuat secara dinamis. Ini dapat diselesaikan dengan mixin, pabrik, dll, tetapi semuanya membutuhkan waktu yang berharga.
2. Tentu saja. Tapi selalu ada keseimbangan antara "arsitektur ideal" dan biaya perubahan. Dalam hal ini beberapa baris kode (yaitu: sekitar 10) yang tidak akan merugikan siapa pun jika dibiarkan menghabiskan banyak waktu. Dan saya harus menggunakan versi yang tidak stabil ini karena saya sangat membutuhkan fitur "read-write binding filter" yang mungkin tidak akan di-backport ke 0.12.x
3. Lihat 2.
4. Pertanyaannya bukan "API mana yang saya sukai". Saya lebih suka Vue. Periode. Pertanyaannya adalah "apakah saya bisa mengandalkan Vue API dalam jangka panjang". Keandalan atas ketampanan. Jika perubahan melanggar, harus ada alasan serius untuk itu. Dalam kasus sintaks pengikatan baru, yang merusak SEMUA kode saya - oke, biarlah, ini lebih mudah dibaca dan memaksa struktur kode yang lebih baik. Dalam hal ini - tidak. Perubahan ini mungkin tidak terputus dengan options.strict = true disetel secara default.

Ya, memutakhirkan selalu disertai dengan kesulitan refactoring, tetapi 1.0 adalah satu-satunya kesempatan bagi Vue untuk membebaskan diri dari opsi konfigurasi lama ini. Setelah 1.0 itu akan benar-benar semver, dan tidak ada yang akan rusak hingga 2.0. Dan saya ingin 1.x bertahan selama mungkin, karena masalah keandalan yang Anda bicarakan.

Mengenai mode ketat: itu pasti menghabiskan waktu refactoring ketika Anda sangat bergantung padanya - tetapi idealnya untuk pengguna baru yang mengambil Vue setelah 1.0, mereka bahkan tidak perlu tahu hal ini ada. Permukaan API harus sekecil mungkin, dan pola penataan global harus sekonsisten mungkin. Memungkinkan untuk menonaktifkan mode ketat pada dasarnya mendorong dua gaya yang berbeda dari penataan aplikasi Vue - bayangkan orang bekerja pada satu aplikasi yang menggunakan strict: true , lalu pindah ke proyek lain yang menggunakan strict: false ... fragmentasi pengalaman pengembang, dan saya ingin menyingkirkan kemungkinan itu, dan 1.0 adalah satu-satunya tempat yang masuk akal untuk melakukan itu.

Agak sial bagi Anda untuk terjebak di tengah transisi ini, dan saya menghargai umpan balik Anda. Tapi apa yang perlu dilakukan harus dilakukan.

@ yyx990803 Saya dapat melihat kasus penggunaan konkret yang membuat saya terjebak.

Apa yang saya coba lakukan?

Saya membangun aplikasi yang dapat diperpanjang: dapat diperpanjang dengan widget. Widget adalah bagian aplikasi yang ditentukan pengembang yang menyambungkan aplikasi global untuk memperluasnya di beberapa titik; itu dimuat secara dinamis saat memulai aplikasi. Setiap instance aplikasi dapat memiliki kumpulan widget yang berbeda dan 2 instance aplikasi dapat hidup di halaman yang sama.

Saat dimuat, widget akan menambahkan komponen yang dibuat secara dinamis ke aplikasi vuejs.
Widget dapat berisi widget lain (anak-anak), kami tidak mengetahui bagaimana jadinya saat startup karena bagian ini dikelola oleh pengguna setelah aplikasi dimuat. Itu sebabnya widget perlu menyadari satu sama lain dan mendaftarkan widget lain.

Masalah

Saya ingin menghindari mendaftarkan widget ini secara global (alasan kompatibilitas).
Karena komponen dibangun dan dimuat secara dinamis, saya perlu mendaftarkan semua komponen di setiap komponen yang dapat berisi anak-anak. Itu tidak banyak mendaftar yang mungkin tidak digunakan. Lihat apa yang saya maksud (harap dicatat bahwa untuk saat ini saya tidak mencoba registrasi komponen lokal, melakukan tes dengan registrasi global):

var components = {

    appComponents: {
       template: "...",
       components: components
    },

    appComponents2: {
       template: "...",
       components: components
    },

    widgetComponents: {
       template: "...",
       components: components
    },

    widgetComponents2: {
       template: "...",
       components: components
    },

}

Apakah ada hambatan kinerja saat melakukan ini?

Itu sebabnya saya pikir cakupan komponen "semi global" mungkin berguna. Ini bisa membantu untuk membangun aplikasi dengan cakupan komponen tertutup di mana komponen akan dapat dijangkau dari komponen root dan anak-anak. Tapi tidak dari akar vuejs lainnya. Bagaimana menurut anda?

Pendaftaran global tidak mendaftar secara rekursif, itu hanya mendaftarkan
komponen itu sendiri dan bukan yang di dalamnya opsi components . jadi saya kira
tidak ada masalah.

Pada Senin, 22 Agustus 2016, 16:00 Soufiane Ghzal [email protected] menulis:

@yyx990803 https://github.com/yyx990803 Saya dapat melihat kasus penggunaan yang konkret
Aku agak terjebak dengan.

_Apa yang saya coba lakukan_

Saya membangun aplikasi yang dapat diperpanjang: dapat diperpanjang dengan widget. Sebuah widget adalah
bagian aplikasi yang ditentukan pengembang, itu dimuat secara dinamis di
memulai aplikasi. Setiap contoh aplikasi dapat memiliki
set widget yang berbeda.

Saat dimuat, widget akan menambahkan komponen yang dibuat secara dinamis ke
aplikasi vuejs.
Widget dapat berisi widget lain (anak-anak), kami tidak mengetahui caranya
akan berada di startup karena bagian ini dikelola oleh pengguna setelah
aplikasi dimuat. Itu sebabnya widget perlu menyadari satu sama lain.

_Masalah_

Saya ingin menghindari untuk mendaftarkan widget ini secara global.
Karena widget dimuat secara dinamis, saya harus mendaftarkan semua widget di
setiap widget yang dapat berisi anak-anak. Itu banyak mendaftar itu
mungkin tidak digunakan. Melihat:

komponen var = {

appComponents: {
   template: "...",
   components: components
},

appComponents2: {
   template: "...",
   components: components
},

}

_Apakah ada hambatan kinerja saat melakukan ini?_

—
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub
https://github.com/vuejs/vue/issues/1297#issuecomment -241339596, atau bisukan
benang
https://github.com/notifications/unsubscribe-auth/AFTLl6QDePtH93VOU2lgrC72Z0vKLsv-ks5qiVcXgaJpZM4F7M1v
.

@fnlctrl Ini bukan tentang pendaftaran global.

Masalahnya adalah

• register pendaftaran global untuk semua instance vue+component.
• register pendaftaran lokal hanya untuk komponen saat ini
• dan tidak ada cara untuk mendaftar root dan anak-anak "semi global": sesuatu yang memungkinkan untuk mendaftar ke instance vue saat ini (termasuk komponen yang ditambahkan ke instance ini juga).

Menurut pendapat saya masalahnya adalah bahwa vue adalah untuk cara statis (global), tetapi dibatasi untuk cara yang dikemas/didistribusikan (lokal).

Registrasi semi-global sebenarnya sudah dimungkinkan karena Vue memiliki pewarisan prototypal.
https://jsfiddle.net/fnlCtrl/32dt9e9g/

@fnlctrl
Saya tidak yakin untuk memahami apa yang ingin Anda tampilkan dengan biola yang Anda kirim (harap perhatikan bahwa contoh Anda memiliki kesalahan: Unknown custom element: <bar> - did you register the component correctly? )

Saya tidak cukup jelas, mungkin Anda tidak mengerti apa yang ingin saya jelaskan. Ayo mulai lagi:

Yang ingin saya jelaskan adalah bahwa kita dapat:

• daftarkan komponen secara global dengan Vue.component('name', {...}) (cocok untuk aplikasi satu halaman)
• Daftarkan komponen secara lokal dalam komponen new Vue({ components: {...} }); (baik untuk mengirimkan komponen dengan dependensi untuk dapat digunakan kembali secara lokal)

Tetapi kami tidak dapat menyediakan komponen dari orang tua ke anak-anak. Sesuatu seperti mendaftarkan komponen global untuk instans vm saat ini dan semua komponen yang dimuat dalam instans ini, tetapi tidak untuk komponen yang dimuat dalam instans vm lainnya. Lihat contohnya: https://jsfiddle.net/p8wqafm1/2/

Apakah kamu mengerti?

Ups sepertinya biola saya tidak disimpan dengan benar..
Ini dia yang mau saya tunjukkan..
https://jsfiddle.net/fnlCtrl/32dt9e9g/1/

Saya sedang membaca contoh Anda sekarang.

Saya telah membuat contoh Anda di sini yang dikoreksi agar berfungsi, saya harap saya memahami Anda dengan benar:
Anda ingin menambahkan komponen dinamis terbatas di dalam Foo.

@fnlctrl Terima kasih atas contoh Anda, tetapi sepertinya itu belum mencakup apa yang saya coba capai.

Menggunakan metode dalam contoh Anda mendaftarkan komponen di Foo saja, tetapi itu tidak membuatnya tersedia di anak-anak $ Foo ( Bar dalam contoh ini).

Lihat biola, saya mendaftar Baz di Foo dan saya ingin itu tersedia di Bar karena dimuat dari Foo : https://jsfiddle .net/8y0Lmb01/3/

Buat contoh Anda: https://jsfiddle.net/fnlCtrl/uvzaotaz/

Intinya adalah bahwa komponen harus memiliki pohon ketergantungan yang jelas, dan komponen dinamis yang bergantung satu sama lain tidak boleh menjadi pengecualian.

@fnlctrl Dalam contoh Anda Baz tidak tersedia di Foo lagi.

Untuk melakukannya, saya dapat menggunakan Vue.component('baz', {...} tetapi masalahnya adalah ia akan "mencemari" instance vue lain dengan komponen baz ini.

ATAU

Saya dapat mendaftarkan Baz di Foo dan Bar , dan semua foo anak, dan semua anak bar, dan semua Foo Grand Children, dll... Tapi itu menambahkan banyak kerumitan dalam hal aplikasi besar/dinamis

Apakah Anda melihat apa yang saya maksud? Saya dapat mendaftar secara lokal, tetapi kami tidak dapat mewarisi komponen untuk anak, cucu,... dari komponen saat ini _only_

Ya, saya mengerti maksud Anda sekarang. Maaf saya tidak sadar bahwa mendaftar
komponen di bawah Foo tidak menjadikannya global di dalam lingkup Foo, tidak seperti
Vue.component . Akan melihat ke sumbernya untuk melihat alasannya.

Pada Senin, 22 Agustus 2016, 20:17 Soufiane Ghzal [email protected] menulis:

@fnlctrl https://github.com/fnlctrl Dalam contoh Anda Baz tidak tersedia
di Foo lagi.

Untuk melakukannya saya dapat menggunakan Vue.component('baz', {...} tetapi masalahnya adalah
itu akan "mencemari" instance vue lainnya dengan komponen baz ini.

ATAU

Saya bisa mendaftarkan Baz di Foo dan Bar, dan semua foo anak-anak, dan
semua anak bar, dan semua Foo Grand Children, dll... Tapi itu menambah banyak
kompleksitas dalam hal aplikasi besar/dinamis

Apakah Anda melihat apa yang saya maksud? Saya dapat mendaftar secara lokal, tetapi kami tidak dapat mewarisi
komponen untuk anak-anak, cucu, ... dari komponen saat ini
_hanya_

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/vuejs/vue/issues/1297#issuecomment -241395119, atau bisukan
benang
https://github.com/notifications/unsubscribe-auth/AFTLl2ud0GDO_hOwFN8GIA1TzVEF1q0Fks5qiZM9gaJpZM4F7M1v
.

Terima kasih :)

Intinya adalah saya ingin mengirimkan pustaka mandiri yang bergantung pada vue, mendaftarkan komponen untuk instance tertentu akan sangat bermanfaat, karena bagaimanapun, sebagai pustaka mandiri, saya tidak diizinkan untuk mendaftarkannya di instance Vue global ( yang akan merusak bagian yang berdiri sendiri).

Tolong, beri tahu saya jika apa yang saya bicarakan mungkin diterapkan di Vue

Yah, saya kira alasannya terlalu jelas sehingga saya abaikan: saya tidak
menggunakan new Foo() ...

Akan mendapatkan biola dalam 20 menit, dalam perjalanan pulang.

Pada Senin, 22 Agustus 2016, 20:27 [email protected] menulis:

Ya, saya mengerti maksud Anda sekarang. Maaf saya tidak sadar bahwa mendaftar
komponen di bawah Foo tidak menjadikannya global di dalam lingkup Foo, tidak seperti
Vue.component . Akan melihat ke sumbernya untuk melihat alasannya.

Pada Senin, 22 Agustus 2016, 20:17 Soufiane Ghzal [email protected]
menulis:

@fnlctrl https://github.com/fnlctrl Dalam contoh Anda Baz tidak
tersedia di Foo lagi.

Untuk melakukannya saya dapat menggunakan Vue.component('baz', {...} tetapi masalahnya adalah
itu akan "mencemari" instance vue lainnya dengan komponen baz ini.

ATAU

Saya bisa mendaftarkan Baz di Foo dan Bar, dan semua foo anak-anak, dan
semua anak bar, dan semua Foo Grand Children, dll... Tapi itu menambah banyak
kompleksitas dalam hal aplikasi besar/dinamis

Apakah Anda melihat apa yang saya maksud? Saya dapat mendaftar secara lokal, tetapi kami tidak dapat mewarisi
komponen untuk anak-anak, cucu, ... dari komponen saat ini
_hanya_

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/vuejs/vue/issues/1297#issuecomment -241395119, atau bisukan
benang
https://github.com/notifications/unsubscribe-auth/AFTLl2ud0GDO_hOwFN8GIA1TzVEF1q0Fks5qiZM9gaJpZM4F7M1v
.

Yah, new Foo(...) juga tidak berfungsi: https://jsfiddle.net/8y0Lmb01/5/

Aneh memang... https://jsfiddle.net/fnlCtrl/p0ggkncu/
Melihat ke dalamnya sekarang.

Saya telah membaca beberapa kode sumber, dan menemukan bahwa di Vue sendiri, kita dapat meretas seperti ini:
https://jsfiddle.net/fnlCtrl/522aw9sm/
(tanpa menggunakan Vue.extend atau Vue.component, tetapi Vue.component hanyalah fungsi pembantu yang melakukan Vue.extend dan memodifikasi Vue.options.components)

Meskipun pendekatan yang sama tidak berfungsi pada Vue yang diperluas:
https://jsfiddle.net/fnlCtrl/v1m2s16u/

Jadi saya kira masalahnya disebabkan oleh resolusi komponen. Aku akan terus mencari.

@fnlctrl Ok terima kasih, saya mencoba memeriksa beberapa hal dan sampai pada kesimpulan yang sama dengan Anda. Saya tidak tahu intinya cukup untuk menemukan mengapa ia bekerja dengan cara ini. Apakah kita tahu apakah itu perilaku yang diharapkan?

Saya pikir komentar ini tentang resolveAsset

Menyelesaikan aset.
Fungsi ini digunakan karena instance anak memerlukan akses
ke aset yang ditentukan dalam rantai leluhurnya.

menyarankan bahwa mendaftarkan komponen pada Vue yang diperluas seharusnya berfungsi.

Kode di badan fungsi tidak melihat rantai leluhur, kan? Mungkin belum dilaksanakan?

Saya belum cukup tahu, masih mempelajari perilakunya, tetapi saya kira "rantai leluhur" mengacu pada parameter pertama options .

Saya kira saya dapat menyimpulkan bahwa penyebabnya adalah ini (src/core/global-api/extend) .
Itu membuat kelas yang diperluas menggunakan metode yang sama dari orang tua mereka.

Saya telah mengujinya, jika Anda menyalin apa yang ada di core/global-api/assets (gunakan kode yang sesuai di dalam versi dist yang dilucuti dari jenisnya, tentu saja)
ke vue.extend, agar terlihat seperti ini (ubah Vue menjadi Sub ):

config._assetTypes.forEach(function (type) {
        Sub[type] = function (id, definition) {
          if (!definition) {
            return this.options[type + 's'][id];
          } else {
            /* istanbul ignore if */
            if ("development" !== 'production') {
              if (type === 'component' && config.isReservedTag(id)) {
                warn('Do not use built-in or reserved HTML elements as component ' + 'id: ' + id);
              }
            }
            if (type === 'component' && isPlainObject(definition)) {
              definition.name = definition.name || id;
              definition = Sub.extend(definition);
            }
            if (type === 'directive' && typeof definition === 'function') {
              definition = { bind: definition, update: definition };
            }
            this.options[type + 's'][id] = definition;
            return definition;
          }
        };
      });

Foo = Vue.extend() dan Foo.component() akan berfungsi.

Meskipun saya kira ini akan menyebabkan beberapa penalti kinerja.

@gsouf Dan saya pikir saya telah menemukan bagian terakhir dari teka-teki (solusi yang setara tanpa memodifikasi vue):
https://jsfiddle.net/fnlCtrl/v1m2s16u/

var Root = Vue.extend()

Root.options.components.Foo = Root.extend({
    template: '<div>Foo</div>'
})

Root.options.components.Bar = Root.extend({
    template: '<div>Bar, uses <foo></foo></div>'
})

new Root({
    template: `
  <div>
    <foo></foo>
    <bar></bar>
  </div>
  `
}).$mount('#app')

Hai @fnlctrl , terima kasih atas outputnya dan maaf atas keterlambatannya.

Memang sepertinya komponen mewarisi komponen dari konstruktornya, bukan dari induknya. Saat ini mencari apakah saya dapat menerapkan tambalan untuk kasus penggunaan saya.

Dalam kasus Anda itu tetap melekat pada konstruktor, bukan ke instance, saya mencarinya untuk menjadi bagian dari instance saja

@fnlctrl karena cara kerja javascript dan berkat contoh Anda, saya dapat mengatasinya dengan "memperluas secara dinamis" vue untuk setiap instance yang saya buat, membuat semuanya tersedia hanya untuk aplikasi ini.:

createVueInstance = function(el, data){
    var vExtend = Vue.extend();
    vExtend.partial('some-semiglobal-partial', "...");
    vExtend.component('some-semiglobal-component', vExtend.extend({...}));

    return new vExtend({
        el: el,
        data: data
    });
};

Setelah memeriksa bagaimana inti dibangun, itu tidak terlihat seperti itu dibangun untuk memungkinkan integrasi yang mudah dari komponen per instans yang tersedia dan solusi ini cukup stabil untuk saya.

Terima kasih atas bantuan Anda!

Btw, saya pikir contoh yang Anda tunjukkan kepada saya dapat dijelaskan secara mendalam di doc. Saya tidak menemukan penyebutan tentang itu

@gsouf Sama -sama. Saya pikir masalah ini sudah cukup bagi mereka yang ingin menerapkan fitur serupa :smile:

Di sini saya memiliki kasus penggunaan 'semi-global':

Saya memiliki komponen Layout yang relatif universal, tetapi kontennya dapat dikonfigurasi oleh komponen yang menggunakan komponen Layout, mis. komponen A menggunakan Layout dan ingin mengonfigurasi kontennya dengan komponen B, beberapa komponen lain mungkin menggunakan Layout dan mengonfigurasi kontennya dengan komponen C, dll.

Haruskah pola ini didukung?

Atau adakah solusi untuk mengganti desain ini?

Pola ini banyak digunakan di iOS untuk meningkatkan penggunaan kembali kode dan ini adalah desain yang fleksibel.

@hpsoar Yang mungkin Anda butuhkan adalah slot

Desain saya adalah sebagai berikut, pada dasarnya ini akan memungkinkan saya untuk melakukan dua hal dengan sel:

1. konfigurasi sederhana sel dengan gaya css, yang akan cukup untuk banyak kasus;
2. masukkan komponen ke dalam sel, yang akan digunakan untuk kasus khusus.

<template>
  <div class="tile is-ancestor">
    <div class="tile is-parent">
      <article class="tile is-child box">
        <div class="table-responsive">
          <table class="table is-bordered is-striped is-narrow">
            <thead>
            <tr>
              <th v-for="c in columns">
                {{c.title}}
              </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in items">
              <template v-for="c in columns">
                <td v-if="c.hasOwnProperty('component')"><div :is="c.component"></div></td>
                <td v-else>{{ item[c.name] }}</td>
              </template>
            </tr>
            </tbody>
          </table>
        </div>
      </article>
    </div>
  </div>
</template>

<script>

export default {
  components: {
  },
  props: [
    'columns',
    'items'
  ],
  data: function () {
    return {
    }
  }
}

</script>

<style lang="scss" rel="stylesheet/scss">
  .table-responsive {
    display: block;
    width: 100%;
    min-height: .01%;
    overflow-x: auto;
  }
</style>