本文总结了Vue中父子组件间的通讯方式，重点讲解了Prop的基本用法、静态和动态值、单向数据流原则以及Prop的校验。通过示例展示了如何正确地在子组件中接收和处理来自父组件的数据，强调了不应在子组件内部改变Prop值。
之前说要学习一下VUE的组件通讯机制，但是因为公司的任务比较多且急，连续两个大的项目模块，合规的和反洗钱真的自己全身心的投入到其中了，连续加了几周的班，今天休息了一下，刚好把vue部分父子组件的通讯方式梳理了一下，就写点总结吧。
基本用法
Prop的基本用法很简单，只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可。
Vue.component('child', {
...
// 接收message
props: ['thisData']
...
})
由于HTML中的属性是不区分大小写的，所以当使用DOM中的模板（HTML中）时，thisData需要转化为this_data。但是，如果使用字符串模板（JS中）时，不受限制，可以为所欲为
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态。
每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop.
Prop中的静态和动态值
在正常情况下，一般在父组件中通过v-bind定义一个动态值，子组件通过Prop接收该值，所以，很多人认为，Prop只能接收动态值。但是，其实Prop可以接受静态属性。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body >
<div id="app">
<!--静态传递数据-->
<my-component message="hi~
最低0.47元/天 解锁文章
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
