Как использовать реквизит и смотреть в Vue?

Question

Я новичок в VueJS и использую библиотеку vue-chessboard для своего проекта.Но я так запутался в способе использования библиотеки, что вижу, что когда мы используем showThreats, мы можем использовать «: showThreats», но мы не используем «:» для «ориентации».Есть код 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 warn]: свойство или метод "black" не определены в экземпляре, но на них ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.См .: 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, которое означает, что оно будет связывать переменную с этим компонентом из parent (двухстороннее связывание данных, которое объясняется в документации). Когда вы используете его без ":", он будет передавать только строку этому компоненту. Поэтому, когда вы передаете: direction = "black", он ожидает, что у вас есть переменная с именем black внутри родительского компонента. Если вы напишите: direction = "'black'", то в этом случае будет пропущена только строка, но легче написать просто direction = "black".