VUE 3: Функция SCOPED & render () и h () ⇐ Javascript

[Anonymous]

Это упрощенная ситуация. На самом деле мой код более сложный и больше. Я делаю компонент таблицы.
Я пытаюсь передать данные из таблицы в слот column-component , который я передаю данные prop. Что я хочу получить: < /p>


Name:





Age:






City:




...

data() {
return {
dataTable: [
{ name: "Alex", age: "20", city: "Msk" },
{ name: "Bob", age: "22", city: "Paris" },
{ name: "Dilan", age: "21", city: "London" },
],
};
},
< /code>
CodeSandbox: Live Пример < /p>
tablecomponent.vue









import Celll from "./Celll.vue";

export default {
components: {
Celll,
},
props: {
data: Array,
},
data() {
return {
columns: [],
};
},
mounted() {
this.columns = this.$slots.default();
},
};


< /code>
columncomponent.vue





export default {};

< /code>
cell.value
import { h } from 'vue';

export default {
props: {
vnodes: {
type: Object,
required: true,
},
row: {
type: [String, Number, Object, Array],
required: true,
},
},

render() {
return h('td', null, this.vnodes);
},
};



Подробнее здесь: https://stackoverflow.com/questions/795 ... h-function