不同点
data 被称之为动态数据，在各自实例中，在任何情况下，我们都可以随意改变它的 数据类型和数据结构 ，不会被任何环境所影响。
props 被称之为静态数据，在各自实例中，一旦在初始化被定义好类型时，基于 Vue 是单向数据流，在数据传递时始终不能改变它的数据类型，而且不允许在子组件中直接操作 传递过来的props数据，而是需要通过别的手段，改变传递源中的数据。至于如何改变，我们接下去详细介绍：
4.单向数据流
这个概念出现在组件通信。props的数据都是通过父组件或者更高层级的组件数据或者字面量的方式进行传递的，不允许直接操作改变各自实例中的props数据，而是需要通过别的手段，改变传递源中的数据。那如果有时候我们想修改传递过来的prop,有哪些办法呢？
方法1：过渡到 data 选项中
在子组件的 data 中拷贝一份 prop，data 是可以修改的
export default {
props: {
type: String
},
data () {
return {
currentType: this.type
}
}
}在 data 选项里通过 currentType接收 props中type数据，相当于对 currentType= type进行一个赋值操作，不仅拿到了 currentType的数据，而且也可以改变 currentType数据。
方法2：利用计算属性
export default {
props: {
type: String
},
computed: {
normalizedType: function () {
return this.type.toUpperCase();
}
}
}以上两种方法虽可以在子组件间接修改props的值，但如果子组件想修改数据并且同步更新到父组件，却无济于事。在一些情况下，我们可能会需要对一个 prop 进行『双向绑定』，此时就推荐以下这两种方法：
方法3：使用.sync
// 父组件
<template>
<div class="hello">
<div>
<p>父组件msg：{{ msg }}</p>
<p>父组件数组：{{ arr }}</p>
</div>
<button @click="show = true">打开model框</button>
<br />
<demo :show.sync="show" :msg.sync="msg" :arr="arr"></demo>
</div>
</template><script>
import Demo from "./demo.vue";
export default {
name: "Hello",
components: {
Demo
},
data() {
return {
show: false,
msg: "模拟一个model框",
arr: [1, 2, 3] };
}
};
</script>
// 子组件
<template>
<div v-if="show" class="border">
<div>子组件msg：{{ msg }}</div>
<div>子组件数组：{{ arr }}</div>
