前言
前端工程化已经成为大势所趋，npm 已经成为前端领域最重要的包管理工具之一。本文将介绍一款 npm 包 wuxus-star-rating-component 的使用方法，并且详细探究其原理及实现方式。
关于 wuxus-star-rating-component
wuxus-star-rating-component 是一款基于 Vue 框架实现的评分组件，其特点是易于安装，简单易用且可自定义样式。其本质是一个 Vue 组件，可以通过 npm 进行安装和使用。
安装
通过 npm 安装：
npm install wuxus-star-rating-component
使用
-- -------------------- ---- -------
----------
---------------- --------------------- --
-----------
--------
------ --------------- ---- ------------------------------
------ ------- -
----------- - --------------- --
------ -
------ -
------------ -
--
-
--
---------通过上面的代码片段，使用起来十分简单，只需引入组件并在 data 中声明一个 v-model 以绑定选中星星个数即可。
wuxus-star-rating-component 的实现原理
在深入了解 wuxus-star-rating-component 的实现原理之前，我们先来了解一下 Vue 的自定义组件基础知识。
Vue 自定义组件
Vue 自定义组件是指开发者通过 Vue.extend 或 Vue.component 创建的自定义标签，可以像普通标签一样使用，并且可以在 Vue 实例中直接绑定数据。
既然是自定义组件，那么就涉及到父子组件之间的数据传递问题，Vue 中的数据传递是单向的，即只能从父组件向子组件传递数据，如果需要从子组件向父组件传递数据，可以通过 $emit 事件触发来实现。
wuxus-star-rating-component 的实现
wuxus-star-rating-component 本质是一个使用 Vue.extend 或 Vue.component 定义的组件，其核心代码如下：
-- -------------------- ---- -------
-------------------------------- -
------ -
------ -
----- -------
-------- --
---------------- -
------ ----- -- - -- ----- -- --
-
--
---- -
----- -------
-------- --
---------------- -
------ ----- - --
-
--
--------- -
----- --------
-------- -----
--
--------- -
----- --------
-------- -----
--
------ -
----- -------- --------
-------- --
--
------- -
----- -------- --------
-------- --
-
--
------ -
------ -
------------ ----------
-
--
--------- -
------------ -
------ ------------ ------- -------- -- --- ------ -- ----- - --
-
-----
--
-------- -
----------------- -
---------------- -- -------------- -
-------
-
---------------- - ------
-- -- ----- -----------
------------------- -------
-
-----
--
-----
---我们可以看到，组件的全部实现都在 Vue.component 中完成，其中 props 部分定义了组件的属性，data 用于维护选中的星星值，computed 中定义了星星的个数，methods 中的 handleRate 方法用于处理用户点击事件，そして注释中的代码片段使用 $emit('input', index) 触发组件的 input 事件，并且将 index 作为参数传递给父组件，从而实现了组件数据的传递。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671148dd3466f61ffe578