Попробуйте передать данные $ref в данные поддержки компонента

#javascript #vue.js

Вопрос:

Привет, у меня есть карусель компонентов, и у меня есть метод:

 carousel () {
  return this.$refs.carousel
}

Когда я пытаюсь перейти к prop другого компонента, я получаю неопределенные данные в prop, почему?

 <Dots :carousel="carousel()" />

В дочернем компоненте у меня есть:

 export default {
  name: 'Dots',
  props: ['carousel']
}

При монтировании, когда я пытаюсь вызвать console.log(this.carousel) , я получаю неопределенный. Но мне нужно получить данные компонента Carousel. Как я могу это сделать?

Песочница: https://codesandbox.io/s/flamboyant-monad-5bhjz?file=/src/components/Test.vue

1. какое значение this.$refs.carousel . Также попробуйте :carousel использовать вычисленное значение вместо вызова метода

2. @RavishaHesh значение этого.$refs.carousel таково: VueComponent {_uid: 16, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}

Ответ №1:

Вы можете установить функцию, carousel чтобы возвращать data то, что вы хотите отправить dots . Затем в родительском компоненте задайте для его возвращаемого значения атрибут, в data котором будет передан как prop :

 const dotsComponent = Vue.component('dotsComponent', { 
  template: '#dotsComponent',
  props: ['carousel']
});

const carouselComponent = Vue.component('carouselComponent', { 
  template: '#carouselComponent',
  data() { return { id:1 } },
  methods: { 
    getData() { return { id: this.id } } 
  }
});

new Vue({
  el: "#app",
  components: { dotsComponent, carouselComponent },
  data() { return { carousel:null } },
  mounted() { this.carousel = this.$refs.carousel.getData(); }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div><carousel-component ref="carousel"/></div>
  <div><dots-component :carousel="carousel"/></div>
</div>

<template id="dotsComponent"><p>Dots: {{carousel}}</p></template>

<template id="carouselComponent"><p>Carousel</p></template>

Развернуть фрагмент

1. Карусель является компонентом пакета npmjs.com/package/vue-carousel , Мне нужно отправить все данные.

2. @RedFox вы можете обернуть его в свой собственный carousel компонент и выполнить описанное выше

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

4. Не полностью понял вашу точку зрения. Но из того, что я понял из вашего вопроса, ваш carousel компонент можно установить как пользовательский, который вы создаете, импортируете эту библиотеку и устанавливаете в разделе компоненты. Таким образом, вы его обернете и выполните вышеуказанное, отправив данные из импортированного vue-carousel компонента

5. imgur.com/a/OxwctvU Посмотрите, пожалуйста, Мою разбивку точек на страницы в другом блоке. Я не могу обернуть компонент carousel в этот блок, потому что это другой блок. И поэтому мне нужно отправить данные ссылки в точки компонента

Ответ №2:

Вы можете передать ссылку напрямую, не используя метод или какое-либо другое свойство :

  <Dots :carousel="$refs.carousel" />