vue方法传值到data_vue 中几种传值方法(3种)

前言

vue项目中，组件跟组件之间数据的传递是很普遍的行为，在这里总结几种常见的vue组件跟组件之间传值方式，其中，主要有父子组件，非父子组件传值。

父组件向子组件传值

方法：父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数props接收即可。具体可参考官方文档。

父组件传递参数代码如下：

import CenterTemplate from '../../components/admin/userCenterTemplate'

export default {

components: {

'center-template': CenterTemplate

},

data () {

return {

userinfo: {name: 'jack'}

}

},

}

上面代码，通过在子组件上面绑定动态参数:form='userinfo'将父组件中的参数传递给子组件，子组件就可以通过props来进行接收。

子组件接收参数代码如下：

...

export default {

props: {

// 接收

form: { userinfo: Object }

}

},

}

// 另一种写法

export default { <