前端学习——组件传值

组件是vue中很重要的一个知识点，在vue开发中大部分功能都是通过组件来实现的，因为组件就是一个小的功能模块，类似于乐高，使用一个一个的小组件拼成一个大的模型。

组件中有一个很重要的的功能点就是组件之间的传值，因为每个组件就是一个小的功能模块，要完成功能需要进行组件之间的通讯，这就是组件传值的作用。

那么组件之间该怎么传值呢？

要了解组件之间的传值要先搞明白vue中的父子组件，所谓的父组件就是引用组件的叫父组件，而被引用的就是子组件。

父子组件之间的通讯有两种情况，一种是父传子(props)，第二种是子传父($emit，$on)。

父传子（props）

如下图所示，定义了一个搜索组件，并且使用props定义了一个plhText的参数，并且展示在输入框的placehodler中，其中placeholder前面的冒号是vue中变量的一种写法，加了冒号代表着等号后面的值是一个js表达式，如果不带冒号等号后的值就是一个普通的字符串。

在父组件中引用子组件：

如下图所示，在另一个组件中引入搜索组件，需要使用import 引入组件路径，并且需要使用components声明组件，然后才可以使用。

效果如图所示：

搜索框中的提示语是由父组件通过props传递过来的，而搜索组件中默认的提示语是：请输入搜索内容。

子传父（$emit，$on）

子组件向父组件传值，需要借助于$emit或$on实现，$emit是触发事件，而$on是监听事件。

给搜索按钮的点击事件添加一个点击函数，点击函数会通过$emit向父组件的input-changed事件传递参数，参数内容是输入框中的值。

如下图，父组件中使用同名的input-changed事件函数进行接受，

效果如下图所示： 

总结

组件之间的数据传输方式，父传子是通过props属性实现的，而子传父是通过$emit实现的自定义事件实现的，$emit的第一个参数就是自定义事件的名称，第二个参数是要传递的参数。

子传父时，要在父组件中的子组件节点实现一个同名的自定义事件方法，用来获取子组件传递的数据。

下图第一个红色框就是在子组件的节点中实现的同名自定义事件，第二个红色框就是同名自定义事件的具体方法。