尝试将 $ref 数据传递给组件的 prop 数据

Answer 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>

Answer 2

您可以直接传递引用，而不使用任何其他属性的方法：

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