Vue-自定义组件
组件(Component)是Vue.js 最强大的功能。组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传值就成为一个需要解决的问题。父组件向子组件传值组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。如何在其他的vue文件中使用这个star组件呢?如下图所示,首先通过import引入st
组件(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文件中声明自定义组件。
更多推荐
所有评论(0)