本文分析了vue组件之间的数据传输方法。分享给大家参考，如下：

1.props:父组件-将值传递给子组件

App.vue是父组件，其他组件是子组件。必须使用=props将父组件值传递给子组件

在父组件(App.vue)中定义一个属性(变量)sexVal=' male '，并将该值传递给子组件(B.vue)，如下所示：

App.vue

模板div id='app '！-router-view/router-view-parentto child : sex=' SexVal '/parentto child/div/template script import parentto child from '。/components/B ' export default { name : ' app }，data : function(){ return { sex val : ' fear ' }，methods : {}，components : { parentto child } }/script B . vue。

模板div class='b_class '！-在外部只允许一个以下元素- p父组件将值传递给子组件/p pname : { { name } }/p pnage : { { age } }/p PSE x: { { sex } }/p/div/模板脚本导出默认值{ data : function(){ return { name : ' zs '，age: 22 } }，prop 3360[' sex ']}/script tips :

将父组件的值传递给子组件，以使用属性值：props据了解，“中介”的父组件绑定传递属性值(:sex='sexval ')，子组件获取属性值props['sex']，将添加到数据对象中

2.$emit:子组件-将值传递给父组件

在B.vue子组件中添加一个点击事件作为示例

@ click=' sendmas

InputType=' button ' @ click=' send msg ' value='子组件值传递给父组件'调用此函数后，使用$emit方法传递参数(alias，在父组件中用作事件名称和值)；

方法： { sendmsg 3360 function(){ this。$ emit ('childmsg '，' value from-subcomponent value ')} } } app . vue

在父组件中使用该别名(作为事件名称)，并调用方法childEvent返回子组件传递的值

p{{message}}/p！-router-view/router-view-parentochild : sex=' sex val ' @ child msg=' child event '/parentochilddata 3360 function(){ return { sex val 3360 ' meeting '，message: '' }，methods : { child event : function(msg){ this . message=msg；//消息来自子组件}}点击“按钮”，值将被传输到父组件。组件不能相互传递值。

希望本文对vue.js程序的设计有所帮助。