Question

我是VueJS的初学者，我将vue-chessboard库用于我的项目。但是我对使用库的方式感到困惑，我看到当我们使用showThreats时，我们可以使用“：showThreats”，但是对于“ orientation”，我们不使用“：”。有vue-chessboard代码：

vue-chessboard

export default {
  name: 'chessboard',
  props: {
    ...,
    showThreats: {
      type: Boolean,
      default: false,
    },
    onPromotion: {
      type: Function,
      default: () => 'q',
    },
    orientation: {
      type: String,
      default: 'white',
    },
  },
  watch: {
    fen: function (newFen) {
      this.fen = newFen
      this.loadPosition()
    },
    orientation: function (orientation) {
      console.log('watch orientation________', orientation)
      this.orientation = orientation
      this.loadPosition()
    },
    showThreats: function (st) {
      this.showThreats = st
      if (this.showThreats) {
        this.paintThreats()
      }
    },
  },
  methods: {...
  }
}

当我使用这个库时

<chessboard :orientation="black"/>

然后，浏览器将注意到： vue.runtime.esm.js？2b0e：619 [Vue警告]：属性或方法“ black”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保在data选项中或对于基于类的组件，此属性都是反应性的。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。如果我使用，则不会发生：

<chessboard orientation="black"/>

但是使用showThreats，文档给出了：

<chessboard :showThreats="true"/>

我不明白为什么？谢谢您对我的帮助^^

Answer 1

当使用：some-property时，这是v-bind：some-property的简写，这意味着它将绑定来自父对象的变量到该组件（双向数据绑定，在文档中有解释）。当不带“：”使用它时，它将仅将字符串传递给该组件。因此，当您传递：orientation =“ black”时，它期望您在父组件中具有名为black的变量。如果您在这种情况下写：orientation =“'black'”，则只会传递一个字符串，但只编写direction =“ black”会更容易。

如何使用道具并在Vue中观看？

1 个答案: