Как получить доступ к игровым реквизитам в созданном хуке? - PullRequest
Новая
       30

Как получить доступ к игровым реквизитам в созданном хуке?

2 голосов
/ 16 апреля 2020

Я пытаюсь получить доступ к свойствам, которые я передаю в мой слот. Но мои slotProps не определены.

Поскольку я все еще новичок в Vue и прочитал их документы, я все еще не могу понять, почему я не могу получить доступ к данным реквизита.

Проблема

Я пытаюсь получить доступ к slotProps в моих дочерних компонентах created, но он не определен

выделено текст 

<template>
  <div>
    <slot :data="data" :loading="loading"></slot>
  </div>
</template>

ребенок 

<template v-slot:default="slotProps">
  <div >

  </div>
</template>

<script>
export default {
  name: "child"
  created: function() {
    console.log("slotProps", slotProps);
  }
};
</script>

1 Ответ

0 голосов
/ 16 апреля 2020

Вам не нужен хук жизненного цикла created(), чтобы достичь желаемого. Есть несколько вещей, которые нужно прояснить:

  • То, что вы используете, на самом деле называется слоты с областью действия . Они полезны, потому что, в отличие от использования слотов по умолчанию и именованных слотов, родительский компонент не может получить доступ к данным своих дочерних компонентов.

  • То, что вы называете Child на самом деле является родительским компонентом.

Child. vue компонент должен выглядеть примерно так: 

<template>
  <div>
    <main>
      <slot :data="data1" :loading="loading1" />
    </main>
  </div>
</template>

<script>
export default {
  name: 'Page',
  data () {
    return {
      data1: 'foo',
      loading1: 'bar'
    }
  }
}
</script>

В компоненте Parent. vue вы можете получить доступ к данным вышеупомянутого компонента следующим образом: 

<template>
  <child>
    <template v-slot="slotProps">
      {{ slotProps.data }},
      {{ slotProps.loading }}
    </template>
  </child>
</template>

<script>
import Child from '@/components/Child.vue'

export default {
  components: { Child }
}
</script>

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

<template>
  <child>
    <template v-slot="{data, loading }">
      {{ data }},
      {{ loading }}
    </template>
  </child>
</template>

<script>
import Child from '@/components/Child.vue'

export default {
  components: { Child }
}
</script>

Это чистый способ доступа к данным дочернего компонента из родительского элемента с использованием слотов с областями видимости.

...