Vue 单文件中的数据传递示例单文件中的数据传递示例
Vue 的单文件组件在使用 Vue 时非常常用，所以我们也会经常遇到组件之间需要传递数据的时候，大致分为三种情况：
父组件向子组件传递数据，通过 props 传递数据。
子组件向父组件传递数据，通过 events 传递数据。
两个同级组件之间传递数据，通过 event bus 传递数据。
文档中也已经详细的说明了各种情况下的解决方法，但是现在我在还没有阅读多少文档的情况下，没有找到有单文件组件方面
的具体书写方式，智商和理解能力有限的情况下，自己尝试了一下，最后发现其实是一样的。所以这篇文章其实是废话，但是
还是想记录一下，不枉自己花了一个多小时。
准备工作，我新建了 6 个文件，分别是：
index.html
main.js 「Vue 实例」
app.vue 「根组件，包含 page 和 footer 组件」
page.vue 「msg 的父组件，footer 的 同级组件」
msg.vue
footer.vue
父组件向子组件传递数据，通过父组件向子组件传递数据，通过 props 传递数据。传递数据。
这里我以 page 向 msg 传递数据为例：page.vue 中
<template>
<div class="page">
page
<msg :love="message"></msg>
</div>
</template>
<script>
import msg from './msg.vue'
export default {
name: 'page',
components: { msg },
data () {
return {
message: 'page-msg'
}
}
}
</script>
msg.vue 中
<template>
<div class="msg">
{{ love }}
</div>
</template>
<script>
export default {
name: 'msg',
props: ['love'] }
</script>
这样以后就会发现，实现了把父组件 page 中的数据传递到子组件 msg 中了。
另外，需要强调一下的是，不要在子组件中修改 props 的值，当然修改是有效的，非常不推荐，而且 Vue 也会有警告提示。
正确的做法是传递给 data 中的属性或者计算属性。props 中的值是可以通过 this.love 访问到的。
特别注意 props 值是引用类型时的情况，不可以进行简单的赋值，会影响到父组件，正确的做法是进行深拷贝。
子组件向父组件传递数据，通过子组件向父组件传递数据，通过 events 传递数据。传递数据。
父组件 page.vue 中
资源评论
weixin_38514805
- 粉丝: 9
- 资源: 932
