Vue父到子传递方法 @和：的区别是什么？

Question

父组件：传递过程中，@和:的区别是什么？

<xy-data-export @before-fn="beforeFn" :export-fn="exportGoods" title="导出结果"></xy-data-export>

Answer 1

@是v-on的简写，是为组件绑定事件，子组件不需要接收，在子组件的$listeners上可以找到，可以使用this.$emit('xxx')手动触发，这样就会触发事件上绑定的函数

:是v-bind的简写，是为组件传递属性，这里属性可以是任意类型的，在子组件中需要使用props接收，在子组件的$props上可以找到(对于未使用props接收的属性，可以在$attrs上找到)，如果传入的数据是一个函数，那么就可以使用this.xxx()，手动调用函数，但是要注意此时this指向的混淆。

Answer 2

@是v-on的简写，:是v-bind的简写

Answer 3

父组件往子组件传值用 : ,子组件往父组件传值要emit事件

Answer 4

@是v-on指令的简写，表示监听事件；
:是v-bind指令的简写，表示绑定参数。
多看文档。