问理解何时使用：，@，并且没有任何用法

EN

为了在vuejs中的组件之间进行数据通信，我们有两个概念：props和events。

vue props

vue custom events

阅读上面的两个链接，从vue文档中了解它们，但简而言之，我们有一个这样的组件结构：

<parent-component>
---- | <child-component>

从父级到子级的数据流是在props的帮助下完成的。也就是说，当你定义child-component时，你可以在它的vue实例对象中设置这个组件可以接受这样的属性。

props: {
  text: { type: String },
  value: { type: Boolean },
}

然后，当您在父组件中使用此组件时，您可以将定义的道具传递给组件，如下所示：

<child-component text="some text" :value="false" />

请注意，:表示法只是v-bind:value="false"的简写，如果不使用此绑定，false将作为string发送给子组件。对于任何其他值类型，您应该使用绑定。

请阅读文档以了解有关vue中绑定的更多信息

attribute binding

v-bind shorthand

现在，从子组件到父组件的数据流是通过events完成的，所以在您的子组件中，您可以emit一个事件，让父组件监听，如下所示：

this.$emit('event-name', payload)

然后，在使用子组件的父组件中，您可以像这样监听此事件

<child-component @event-name="doSomethingFun($event)" />

其中doSomethingFun()是父组件中的方法，我们使用$event将子组件发送的有效负载传递给此方法

请注意，与v-on:event-name="doSomethingFun($event)"一样，@表示法也是v-on的缩写

:是v-bind:的缩写，用于动态呈现诸如src、href等属性。

@是v-on:click的缩写，它是函数调用的事件处理程序。

您可以阅读更多Event handling shorthand syntax