组件(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文件中声明自定义组件。


Logo

前往低代码交流专区

更多推荐