在Vue中为组件传递参数

使用Vue框架开发应用时,组件(Component)是组建应用的基本模块之一。一个组件可以是一屏完整的界面(初学Angualr的人往往是这样认识组件的),也可以是界面中的一部分,小到一个按钮(Button),一个输入框(Input);大到一个列表或是一个复杂的业务输入表单(Form)。那如何提高组件的复用度呢?当然是采用传参的方式,将变化的部分通过参数抽取,隔离出来,就像我们在定义函数的时候做的那样。

在vue中,的组件都有独立的作用域,要想向组件传递参数,必须首先在组件中通过props属性来声明要接收的参数列表。 例如:

1
2
3
4
5
export default {
name: 'card',
props: ['item', "idx"],
...
}

这样就在 Card 组件中声明可以接收两个参数,一个是 item, 另一个是 idx。

在使用该组件时,参数名将映射为html标签的属性, 比如使用 Card 组件,可以用以下的代码:

1
<card item='call me' idx=1></card>

在上面的代码中,传递的实际参数是字符串:”call me”和整数 1, 如果想要将某个变量(对象)传递给组件,则要采用绑定的语法,如:

1
<card v-bind:item='item' idx=1></card>

这样就能将名为 item 对象的值传递给 card 组件了。

本文标题:在Vue中为组件传递参数

文章作者:晨星

发布时间:2019年09月21日 - 08:09

最后更新:2020年09月16日 - 08:09

原始链接:https://www.mls-tech.info/web/vue/vue-component-params/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。