Управляемый данными компонент CSS Grid Vue - PullRequest
Новая
       9

Управляемый данными компонент CSS Grid Vue

0 голосов
/ 17 ноября 2018

Я хочу создать компонент Grid, который принимает количество столбцов от пользователя, принимает данные и отображает все его дочерние элементы в последовательные ячейки.

Примерно так. 

<Grid :cells="12" :columns="6">
    <div>Child1 Cell1</div>
    <div>Child2 Cell2</div>
    <div>Child3 Cell3</div>
    <div>Child4 Cell4</div>
    <div>Child5 Cell5</div>
    <div>Child6 Cell6</div>
</Grid>

В компоненте Grid.vue в шаблоне именно это я и собираюсь сделать. 

<div class="nugget-grid-item" v-for="cell of cells" :key="cell">
    {cell}
</div>

Это отобразит что-то подобное в пользовательском интерфейсе. Grids

Пунктирная граница в каждой ячейке связана с классом nugget-grid-item CSS, но здесь CSS не имеет значения, поэтому давайте проигнорируем это.

Что я не могу понять, так это как заставить этот компонент Grid отображать следующее. enter image description here

Нет ли что-то вроде this.children из React в Vue?

1 Ответ

0 голосов
/ 17 ноября 2018

Что вам нужно, это слоты.Смотрите документы здесь.Как вы увидите, слоты позволяют родительскому компоненту передавать элементы DOM в дочерний компонент.Базовый взгляд на них может выглядеть следующим образом: 

//ChildComponent.vue
<template>
  <div>
    <p>I'm the child component!</p>
    <!-- Content from the parent gets rendered here. -->
    <slot></slot>
  </div>
</template>

И затем вы вставляете контент в теги слотов следующим образом: 

//ParentComponent.vue
<template>
  <div>
    <child-component>
      <p>I'm injected content from the parent!</p>
      <p>I can still bind to data in the parent's scope, like this! {{myVariable}}</p>
    </child-component>
  </div>
</template>

Слоты могут быть довольно сложными и выполнять многовещи, на которые стоит обратить внимание.

В дополнение к вашему нижеследующему комментарию вы можете поместить v-for в сетку.Это выводит то, что вы, кажется, после.Я ввел вход, чтобы принять количество пользователей в столбцах, как вы сказали, и затем он отображает это количество ячеек.Конечно, вы можете использовать несколько слотов, именованных слотов и слотов с заданной областью, но я оставлю вам на ваше усмотрение, как вы расширите это. 

//Grid.vue
<template>
    <div class="cell">
        <slot></slot>
    </div>
</template>

<script>
export default {

}
</script>
 <style scoped>
    .cell {
        height: 40px;
        width: 60px;
        border: 1px solid gray;
    }
 </style>

и родительский: 

<template>
    <div class="content">

        <label>Enter number of columns</label>
        <input v-model.number="col" type="number">
        <Grid v-for="(n, i) in col" :key="i" >
            <div>Child{{n}} Cell{{n}}</div>
        </Grid>
    </div>
</template>

<script>

import Grid from '@/components/admin/Grid'

export default {
    layout: 'admin',
    components: {
        Grid
    },
    data: () => ({

        col: 4
    }),
}
</script>
...