Javascript Vue组件未绑定样式

嗨，我是Vue的新手，所以我可能错过了一些明显的东西。 我有一个组件

SliderItem

，我想将其设置在顶部位置，因此我向数据添加了一个属性：

data () {
    return {
    /*more data*/
     topSliderText: '120px'
    }
}

这是Vue实例

import { Slider } from 'vue-easy-slider'
var SliderItem = require('./components/easy-slider-item.vue');

new Vue( {
  el: '#slider',
  data () {
    return {
      list: [
        { background: "url('/images/sliders/be.png')", width: '100%', height: '100%' },
      ]
    }
  },
  components: {
    Slider,
    SliderItem
    },
    mounted() {

    }
} );

然后在视图中

<div class="" id="slider">
<slider animation="fade">
  <slider-item v-bind:style="{top: topSliderText}" v-for="(i, index) in list" :key="index">
    <div :style="i">
        <div class="slider-text">
             <p style="font-size: 5rem; text-align: center;">Page @{{ index +1 }}</p>
        </div>

    </div>
  </slider-item>
</slider>

页面@{{index+1}

但是不工作，

SliderItem

没有样式，我在控制台上收到了这个警告

vue slider.js:561[vue warn]：属性或方法“topSliderText”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性

vue slider.js:562[vue warn]：计算属性“topSliderText”已在数据中定义

但是当我使用Vue chrome扩展来查看组件时，它具有这样的属性。。。我不知道我做错了什么

---

提前感谢。

您在

SliderItem

组件中定义了

topSliderText

，但在父组件中使用了它

这就是为什么当vue在父组件的属性中搜索

topSliderText

时，会得到vue[warn]

---

因此，将

topSliderText

定义为父组件本身的数据属性

您在

SliderItem

组件中定义了

topSliderText

，但在

SliderItem

的父组件中使用它，这就是为什么您会收到警告。在父项中定义

topSliderText

itself@VamsiKrishna非常感谢你！它是有效的：）我可以添加一个答案吗？当然可以！！