vue中如何使用props和watch？答案

【问题标题】：How to use props and watch in vue?vue中如何使用props和watch？
【发布时间】：2019-11-01 03:27:17
【问题描述】：

我是 VueJS 的初学者，我的项目使用 vue-chessboard 库。但是我对库的使用方式很困惑，我看到当我们使用 showThreats 时，我们可以使用 ":showThreats"，但我们不使用 ":" 来表示 "orientation"。有vue-chessboard的代码：

vue-棋盘

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”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。如果我使用，则不会发生：

<chessboard orientation="black"/>

但是对于 showThreats，文档给出了：

<chessboard :showThreats="true"/>

我不明白为什么？谢谢你帮助我^^

【问题讨论】：

与: 的区别在于一个绑定到一个值而另一个不绑定。在orientation="black" 中，您不需要:，因为您所做的只是传递一个字符串。在您的第二种情况 :showThreats="true" 您需要 : 因为您正在传递一个 javascript boolean
啊哈，我看到了答案，stackoverflow.com/questions/45175527/…
在属性前面使用冒号相当于v-bind。这意味着像:orientation="black" 这样的属性将方向属性绑定到变量black，但是如果您使用orientation="black"，那么您只是将方向绑定到字符串black

标签： vue.js vuejs2

【解决方案1】：

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

【讨论】：