这篇文章主要介绍了Vue之父子组件传值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、简要介绍
父子组件之间的传值主要有三种：传递数值、传递方法、传递对象，主要是靠子组件的 props 属性来接收传值，下面分别介绍：
（一）传递数值
1.子组件：Header.vue
<div> <!-- data对象里并没有 msg 属性，这里调用的是父类传递过来的 msg 属性 --><h2>{{msg}}</h2></div>
可以看到，在子本文来源gaodai$ma#com搞$代*码*网(组件中的data对象里并没有 msg 属性，这里调用的是父类传递过来的 msg 属性，接收就是靠 props: [‘msg’]。
2.父组件Home.vue
<div> <!-- 2.使用子组件，并向子组件传值 --><br><br></div>
传值的核心思想就是，在使用子组件的地方，加上要传递的值:
（二）传递方法
传递方法的写法和传递数值一样，下面只写出关键步骤：
父组件
<div> <!-- 2.使用子组件，并向子组件传值 --><br><br></div>
子组件
<div> <button>接收父组件的方法</button></div>
（三）传递对象
传递对象的写法和传递数值一样，下面只写出关键步骤：
父组件
<div> <!-- 2.使用子组件，并向子组件传值，这里的 this 就是 Home 组件 --><br><br></div>
子组件
<div> <!-- data对象里并没有 msg 属性，这里调用的是父类传递过来的 msg 属性 --><h2>{{msg}}</h2><br><br><button>接收父组件的方法</button></div>
（四）传递数值类型校验
props: { 'home': Object }
其他和上面类似！
以上就是详解Vue之父子组件传值的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：详解Vue之父子组件传值
转载请注明原文链接：详解Vue之父子组件传值
