Vue-自定义组件

组件（Component）是Vue.js 最强大的功能。组件可以封装可重用的代码，通过传入对象的不同，实现组件的复用，但组件传值就成为一个需要解决的问题。

父组件向子组件传值

组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。

如何在其他的vue文件中使用这个star组件呢？如下图所示，首先通过import引入star组件对象，并在想使用star组件的vue文件中声明注册star组件。现在就可以通过标签来在该vue文件中任意地方使用star组件了。

子组件star要显式的使用props选项声明它期待获得的数据。在这里指的“size”和“score”两个变量。可以通过父级给子组件star传入大小和数值这两个对象，来实现对子组件的定制化。 

<div class="star-wrapper">

          <star :size="48" :score="seller.score"></star>

</div>

阐述完上述内容,下面给出在项目中的实例（filterConditon.vue）：

将公用组件的代码filterCondion.vue写在文件夹components中。

在src文件夹的main.js文件中声明自定义组件。