Question

我是vue js的新手，并且缺少传递组件道具尝试使vue-slider-component example垂直。

<vue-slider direction=vertical ></vue-slider>

和

<vue-slider :direction=vertical ></vue-slider>

失败了，我应该如何在示例中将props传递给组件？

编辑：
试过评论中的建议：

<vue-slider direction={vertical} ></vue-slider>

和

<vue-slider :direction={vertical} ></vue-slider>

Answer 1

您应该将值传递为字符串，如下所示：

<vue-slider :direction="'vertical'"></vue-slider>

请参阅示例here

new Vue( {
  el: '#app',
  data () {
    return {
    }
  },

  methods: {
  },
  mounted () {
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
})

#app {
  margin: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://nightcatsama.github.io/vue-slider-component/dist/index.js"></script>
<div id="app">
  <vue-slider :direction="'vertical'" :height="100" :width="6"></vue-slider>
</div>

Answer 2

你所追求的答案是神奇的

#app {
  transform: rotate(90deg);
}

我不确定这是否可以通过道具来实现......老实说，并不是所有那些熟悉vue-js的人都很抱歉在答案上大肆宣传。 =）

更简洁。将自定义类添加到滑块并相应地应用旋转（这样您就不会旋转整个应用程序=）

Answer 3

我相信你正在寻找的答案是一个观察者，这已经在道具的背景下得到了回答：https://stackoverflow.com/a/44460098/896285

vue js vue-slider-component如何更新道具

3 个答案: