Vue2.0 组件传值通讯的示例代码
发布时间：2020-12-17 02:51:15 所属栏目：百科 来源：网络整理
导读：在Vue项目中，我们经常把某个功能模块封装起来，形成组件，下次调用时非常方便，同时也是在一些循环中进行dom操作的一种较好方式。 本次我想以一个评价组件来说一下组件的事件和参数是怎样传递的，如何完成的组件通讯。 示例如下： 这里先说一下组件设计思路
|
在Vue项目中，我们经常把某个功能模块封装起来，形成组件，下次调用时非常方便，同时也是在一些循环中进行dom操作的一种较好方式。 本次我想以一个评价组件来说一下组件的事件和参数是怎样传递的，如何完成的组件通讯。 示例如下：
这里先说一下组件设计思路：明确整个功能场景，找出存在的事件操作，此例是一个简单的评价功能，即点击某一个星星时左边以及当前为选中的黄色星，右边为未选中的白色星。 确定可复用的组件，即具有重复操作的模块，这里明显的每一个星星为一个可复用组件,其实还有个星星变成白色和黄色也是一个小组件，这种在具体写的时候觉得可以再分即可。 至此一个划分了三个组件：JudgeOf、JudgeStar、StarImg 这里需要明确的是，在大多数的组件通讯中，父组件往子组件传递的都是数据，子组件往父组件传递的才是事件， 我们姑且称父到子走的是一个数据流，子到父走的是一个事件流，了解这一点基本可以很好的了解组件通讯的情况。
JudgeOf组件：基本的外框，循环starList构成三个评分选项。向子组件传递选项名字，和当前选项的索引 评价内容
JudgeStar组件：在这里注册一个chooseIndex，当点击某一个星星时，StarImg组件emit当前星星的index，JudgeStar组件中接收此参数并赋值给chooseIndex，同时StarImg里面watch这个参数，大于index表明没有被选中，反之则为选中， StarImg组件：观察chooseIndex值的变化 总结一下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
