vue组件传参

 

Vue组件传参可以通过props传递，props是用来接收组件外部传递的数据的。有两种方式可以传递props：一种是通过父组件传递，另一种是通过路由传递。

 

1. 父组件传递props：

 

在Vue中，父组件可以通过在子组件的标签上绑定属性的方式传递props。例如：

 

```html

 

```

 

在子组件中，定义props接收传递过来的数据：

 

```html

 

```

 

这样，父组件中的name和age会传递给子组件，子组件就可以使用这些数据了。

 

2. 路由传递props：

 

在Vue中，可以通过路由的props属性来传递props。例如：

 

```javascript

const router = new VueRouter({

routes: [

{

path: '/user/:id'

 

name: 'user'

 

component: User

 

props: true

}

]

})

```

 

在路由中，设置props为true，表示将路由参数作为props传递给组件。在组件中，可以通过props接收传递的props。例如：

 

```html

 

```

 

这样，用户在访问`/user/123`时，传递的参数123就会通过props传递给组件，组件可以使用该参数了。

 

除了直接传递数据外，还可以在props中定义一些验证规则，确保传递的数据符合要求。例如，可以使用type来指定数据类型，required来指定是否必须传递等等。示例如下：

 

```html

```

 

在上面的例子中，age的类型必须为Number，并且是必须传递的，而username的类型必须为String，并且默认值为'张三'。

 

总结：

 

通过props传递参数是Vue组件之间进行数据通信的一种方式，父组件可以将数据传递给子组件，也可以通过路由将数据传递给组件。在接收传递的props时，可以设置验证规则来确保数据的正确性。这样就能够实现组件之间的数据传递和共享了。