在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 组件了。