Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。
首先用 vue-cli 创建一个项目，其中 App.vue 是父组件，components 文件夹下都是子组件。
一、父组件向子组件传递数据
在 Vue 中，可以使用 props 向子组件传递数据。
子组件部分：
这是 header.vue 的 HTML 部分，logo 是在 data 中定义的变量。
如果需要从父组件获取 logo 的值，就需要使用 props: ['logo']
在 props 中添加了元素之后，就不需要在 data 中再添加变量了
父组件部分：
在调用组件的时候，使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg
然后就能将App.vue中 logoMsg 的值传给 header.vue 了：
二、子组件向父组件传递数据
子组件主要通过事件传递数据给父组件
子组件部分：
这是 login.vue 的 HTML 部分，当<input>的值发生变化的时候，将 username 传递给 App.vue
首先声明一个了方法 setUser，用 change 事件来调用 setUser
在 setUser 中，使用了 $emit 来遍历 transferUser 事件，并返回 this.username
其中 transferUser 是一个自定义的事件，功能类似于一个中转，this.username 将通过这个事件传递给父组件
父组件部分：
在父组件 App.vue 中，声明了一个方法 getUser，用 transferUser 事件调用 getUser 方法，获取到从子组件传递过来的参数 username
getUser 方法中的参数 msg 就是从子组件传递过来的参数 username
三、子组件向子组件传递数据
Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。
为了便于开发，Vue 推出了一个状态管理工具 Vuex，可以很方便实现组件之间的参数传递
</div>
<div class="postDesc">posted @ <span id="post-date">2017-01-09 19:06</span> <a href="https://www.cnblogs.com/wisewrong/">Wise.Wrong</a> 阅读(<span id="post_view_count">84638</span>) 评论(<span id="post_comment_count">17</span>) <a href="https://i.cnblogs.com/EditPosts.aspx?postid=6266038" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(6266038);return false;">收藏</a></div>
</div>
<script type="text/javascript">var allowComments=true,cb_blogId=317026,cb_entryId=6266038,cb_blogApp=currentBlogApp,cb_blogUserGuid='927db152-66a5-e611-845c-ac853d9f53ac',cb_entryCreatedDate='2017/1/9 19:06:00';loadViewCount(cb_entryId);var cb_postType=1;var isMarkdown=false;</script>
zhxiao
确实跨度比较大。。。
这部分的组件都需要自己写，主要的代码上面都贴出来了~
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3640060" class="layer">#3楼</a><a name="3640060" id="comment_anchor_3640060"></a> <span class="comment_date">2017-03-14 11:01</span> <a id="a_comment_author_3640060" href="https://www.cnblogs.com/zhangxjiushiwo/" target="_blank">zhxiao</a> <a href="http://msg.cnblogs.com/send/zhxiao" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3640060" class="blog_comment_body"><a href="#3640059" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3640059);">@</a>
WiseWrong
hahahha 我刚才照着示例项目找了半天才反应过来
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3677611" class="layer">#4楼</a><a name="3677611" id="comment_anchor_3677611"></a> <span class="comment_date">2017-04-26 14:28</span> <a id="a_comment_author_3677611" href="https://www.cnblogs.com/hi-shepherd/" target="_blank">hi_shepherd</a> <a href="http://msg.cnblogs.com/send/hi_shepherd" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3677611" class="blog_comment_body">看了博文才想起router-link 进来的组件传参问题 总之 谢了</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3677611,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3677611,'Bury',this)">反对(0)</a></div><span id="comment_3677611_avatar" style="display:none;">http://pic.cnblogs.com/face/1032087/20161202210803.png</span>
</div>
</div>
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3677682" class="layer">#5楼</a><a name="3677682" id="comment_anchor_3677682"></a>[<span class="louzhu">楼主</span>] <span class="comment_date">2017-04-26 15:22</span> <a id="a_comment_author_3677682" href="https://www.cnblogs.com/wisewrong/" target="_blank">Wise.Wrong</a> <a href="http://msg.cnblogs.com/send/Wise.Wrong" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3677682" class="blog_comment_body"><a href="#3677611" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3677611);">@</a>
hi_shepherd
哈哈，有帮助就好~
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3700636" class="layer">#6楼</a><a name="3700636" id="comment_anchor_3700636"></a> <span class="comment_date">2017-05-25 14:17</span> <a id="a_comment_author_3700636" href="https://www.cnblogs.com/tarena-code/" target="_blank">千年人</a> <a href="http://msg.cnblogs.com/send/%E5%8D%83%E5%B9%B4%E4%BA%BA" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3700636" class="blog_comment_body">子组件中不需要在写logo:''，不然会出现警告-</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3700636,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3700636,'Bury',this)">反对(0)</a></div>
</div>
</div>
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3700645" class="layer">#7楼</a><a name="3700645" id="comment_anchor_3700645"></a>[<span class="louzhu">楼主</span>] <span class="comment_date">2017-05-25 14:24</span> <a id="a_comment_author_3700645" href="https://www.cnblogs.com/wisewrong/" target="_blank">Wise.Wrong</a> <a href="http://msg.cnblogs.com/send/Wise.Wrong" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3700645" class="blog_comment_body"><a href="#3700636" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3700636);">@</a>
千年人
多谢指出~
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3706571" class="layer">#8楼</a><a name="3706571" id="comment_anchor_3706571"></a> <span class="comment_date">2017-06-04 10:33</span> <a id="a_comment_author_3706571" href="https://www.cnblogs.com/hi-shepherd/" target="_blank">hi_shepherd</a> <a href="http://msg.cnblogs.com/send/hi_shepherd" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3706571" class="blog_comment_body"><a href="#3700636" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3700636);">@</a>
千年人
正解
因为变量只需要声明一次
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3722482" class="layer">#9楼</a><a name="3722482" id="comment_anchor_3722482"></a> <span class="comment_date">2017-06-26 10:01</span> <a id="a_comment_author_3722482" href="https://www.cnblogs.com/qiaoxinming/" target="_blank">乔锌铭</a> <a href="http://msg.cnblogs.com/send/%E4%B9%94%E9%94%8C%E9%93%AD" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3722482" class="blog_comment_body">大神 这个 项目的 App.vue 是怎么写的额 这个项目的 源代码 还在么 github 地址能发我吗</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3722482,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3722482,'Bury',this)">反对(0)</a></div><span id="comment_3722482_avatar" style="display:none;">http://pic.cnblogs.com/face/1089456/20170101102901.png</span>
</div>
</div>
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3768632" class="layer">#10楼</a><a name="3768632" id="comment_anchor_3768632"></a> <span class="comment_date">2017-08-28 17:06</span> <a id="a_comment_author_3768632" href="http://home.cnblogs.com/u/1107381/" target="_blank">饼yue</a> <a href="http://msg.cnblogs.com/send/%E9%A5%BCyue" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3768632" class="blog_comment_body"><a href="#3706571" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3706571);">@</a>
hi_shepherd
我怎莫没有看到
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3796345" class="layer">#11楼</a><a name="3796345" id="comment_anchor_3796345"></a> <span class="comment_date">2017-09-25 21:44</span> <a id="a_comment_author_3796345" href="http://home.cnblogs.com/u/1231089/" target="_blank">紫色天</a> <a href="http://msg.cnblogs.com/send/%E7%B4%AB%E8%89%B2%E5%A4%A9" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3796345" class="blog_comment_body">新手福利啊<br><a href="http://t.cn/RKSsoCW" target="_blank">http://t.cn/RKSsoCW</a></div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3796345,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3796345,'Bury',this)">反对(0)</a></div>
</div>
</div>
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3850166" class="layer">#12楼</a><a name="3850166" id="comment_anchor_3850166"></a> <span class="comment_date">2017-11-25 17:32</span> <a id="a_comment_author_3850166" href="https://www.cnblogs.com/lin3fei/" target="_blank">有你有情</a> <a href="http://msg.cnblogs.com/send/%E6%9C%89%E4%BD%A0%E6%9C%89%E6%83%85" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3850166" class="blog_comment_body">同9楼，我也想知道APP.vue里的header，footer 怎么写的，我才学这个，不会，有源码吗？可以发个吗？</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3850166,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3850166,'Bury',this)">反对(0)</a></div><span id="comment_3850166_avatar" style="display:none;">http://pic.cnblogs.com/face/471631/20130724140447.png</span>
</div>
</div>
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3851349" class="layer">#13楼</a><a name="3851349" id="comment_anchor_3851349"></a>[<span class="louzhu">楼主</span>] <span class="comment_date">2017-11-27 13:52</span> <a id="a_comment_author_3851349" href="https://www.cnblogs.com/wisewrong/" target="_blank">Wise.Wrong</a> <a href="http://msg.cnblogs.com/send/Wise.Wrong" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3851349" class="blog_comment_body"><a href="#3850166" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3850166);">@</a>
有你有情
上面的截图就是全部的代码了
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3941313" class="layer">#14楼</a><a name="3941313" id="comment_anchor_3941313"></a> <span class="comment_date">2018-04-03 14:44</span> <a id="a_comment_author_3941313" href="https://www.cnblogs.com/web1/" target="_blank">百撕可乐</a> <a href="http://msg.cnblogs.com/send/%E7%99%BE%E6%92%95%E5%8F%AF%E4%B9%90" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3941313" class="blog_comment_body">我这么写，飘红一片</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3941313,'Digg',this)">支持(1)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3941313,'Bury',this)">反对(0)</a></div><span id="comment_3941313_avatar" style="display:none;">http://pic.cnblogs.com/face/950780/20180628171412.png</span>
</div>
</div>
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3941438" class="layer">#15楼</a><a name="3941438" id="comment_anchor_3941438"></a>[<span class="louzhu">楼主</span>] <span class="comment_date">2018-04-03 16:11</span> <a id="a_comment_author_3941438" href="https://www.cnblogs.com/wisewrong/" target="_blank">Wise.Wrong</a> <a href="http://msg.cnblogs.com/send/Wise.Wrong" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3941438" class="blog_comment_body"><a href="#3941313" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3941313);">@</a>
百撕可乐
有具体的报错信息么
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#3980206" class="layer">#16楼</a><a name="3980206" id="comment_anchor_3980206"></a> <span class="comment_date">2018-05-23 11:12</span> <a id="a_comment_author_3980206" href="https://www.cnblogs.com/gaodp/" target="_blank">最咸的咸鱼</a> <a href="http://msg.cnblogs.com/send/%E6%9C%80%E5%92%B8%E7%9A%84%E5%92%B8%E9%B1%BC" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_3980206" class="blog_comment_body">谢谢大佬，搞定了</div><div class="comment_vote"><a href="javascript:void(0);" class="comment_digg" onclick="return voteComment(3980206,'Digg',this)">支持(0)</a><a href="javascript:void(0);" class="comment_bury" onclick="return voteComment(3980206,'Bury',this)">反对(0)</a></div><span id="comment_3980206_avatar" style="display:none;">http://pic.cnblogs.com/face/1172315/20170711143717.png</span>
</div>
</div>
<div class="feedbackItem">
<div class="feedbackListSubtitle">
<div class="feedbackManage">
<span class="comment_actions"></span>
</div>
<a href="#4061047" class="layer">#17楼</a><a name="4061047" id="comment_anchor_4061047"></a><span id="comment-maxId" style="display:none;">4061047</span><span id="comment-maxDate" style="display:none;">2018/9/7 17:52:37</span> <span class="comment_date">2018-09-07 17:52</span> <a id="a_comment_author_4061047" href="https://www.cnblogs.com/wushaopeng/" target="_blank">wu_sp</a> <a href="http://msg.cnblogs.com/send/wu_sp" title="发送站内短消息" class="sendMsg2This"> </a>
</div>
<div class="feedbackCon">
<div id="comment_body_4061047" class="blog_comment_body"><a href="#3941313" title="查看所回复的评论" onclick="commentManager.renderComments(0,50,3941313);">@</a>
百撕可乐
要不要这么逗，
</div><!--end: forFlow -->
</div><!--end: mainContent 主体内容容器-->
<div id="sideBar" style="top: 530px;">
<div id="sideBarMain">
公告
<div id="blog-calendar" style="display:none"></div><script type="text/javascript">loadBlogDefaultCalendar();</script>
<div id="leftcontentcontainer">
<div id="blog-sidecolumn"><div id="sidebar_search" class="sidebar-block"></div><div id="sidebar_categories">
945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
