vue子组件的使用和事件传递

vue子组件的使用和事件传递

在使用vue进行编程的时候我们经常会遇到在多个界面重用功能，比如联动的下拉框，重复的表单等等。如果在每个模块里面都重新写一遍，在发生变更的时候需要修改很多的界面，导致了复杂的工作量。那么需要怎么样去处理呢？vue里面提供了子组件的方式，在我理解就是自定义标签。下面看一下效果。

在粉色的虚框中是子组件，它有一个值是aabbcc，通过点击子组件的自定义按钮，父组件就能收到相应的值。

具体的实现：

子组件

父组件：

这里需要注意的是子组件和父组件之间传递值是通过emit方法进行的

子组件中使用

this.$emit("selfevent", this.data);

进行传递参数。

父组件中使用

selfmodel @selfevent="selfevent">

进行接收参数。