开发者学堂课程【Vue.js 入门与实战：组件传值-父组件向子组件传值和 data 与props 的区别】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8185
组件传值-父组件向子组件传值和 data 与 props 的区别
vm 实例也可以看成一个大的组件 ，因为也有自己的控制区域与 date。同时实例也可以看到是一个组件。
var vm = new Vue({
el:’#app’,
Date:{}
Method:{}
Components:{
Com1:{
Template:’<h1>这是子组件 <h1>‘
此时 vm 身上挂载了一个 com1 的子组件，所以在 vm 控制的区域内部，可以使用com1
此时右键浏览，可以正常显示，且没有报错。
如果把代码写成：
Var vm = new Vue({
el:’#app’,
Date:{}
Mag:’123 啊-父组件中的数据’
此时在子组件 com1 能否访问父组件 msg 中的数据，首先，如果不考虑 vue ，在 js 中 Component 后部分代码，代表一个子集作用域，此时子集作用域是可以访问到父集作用域的。
Var vm = new Vue({
el:’#app’,
Date:{}
Mag:’123 啊-父组件中的数据’
｝，
Method:{}
Components:{
Com1:{
Template:’<h1>这是子组件---｛（msg）｝ <h1>‘
执行发现，显示不全，且报错，报错内容为：property or method ”msg” is not defined on the instance ...提示我们属性或者方法中，都搜索不到 msg 。
//结论：经过演示发现，子组件中默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法。
但是经常会有子组件想要展示父组件的数据，此时就需要父组件向子组件传值。
<!--父组件，可以在引用子组件的时候，通过属性绑定（v-bind:）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递给子组件内部，供子组件使用 -->
上面的代码中， com1 是父组件引用的，只是单纯的以一个标签的形式引用了一次，父组件在引用 com1 的时候，想要把 msg 交给子组件，让子组件去使用。
可以通过如下代码实现：
<com1 v-bind:parentmsg=“msg”></com1>
</div>
此时已经把 msg 传递到了子组件中，此时子组件是无法直接使用的，会提示报错，找不到以上信息。其实是因为，缺少了一个步骤：当父组件通过自定义属性传递了一些数据给子组件，子组件如果想要使用，必须按照传递时候数据的名称，再重新定义一次。
props:【‘patentmsg’】,
//把父组件传递过来的parentmsg属性，先在props数组中定义一下，这样才能使用这个数据。
通过数据重新定义，此时右键浏览，发现可以正常执行。
<script>
//创建Vue实例，得到ViewModel
Var vm = new Vue({
el:’#app’,
data: {
mag:’123 啊-父组件中的数据’
},
methods:{},
components: {
Com1:{
data() {
//注意：子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过Ajax，请求回来的数据，都可以做到，都可以放在data身上；
//data上的数据，都是可读可写的；
return {
title:’123’
content；’qqq’
}
},
template:’<hl>这是子组件---{{parentmsg}}</hl>’,
//注意：组件中的所有props中的数据，都是通过父组件传递给子组件的
//props中的数据，都是只读的，无法重新赋值
directives:{},
filters: {},
components: {}，
methods: {
changs() {
this.parentmsg = ‘被修改了’
}
}
});
当前在 com1 中有父组件中的 date ，还有子组件中的 props 定义的内容。但提示报错，定义在 prop 上面的数据，只要被定义了，是无法被重写的。如果想要修改，需要使用 data 进行数据定义。
</script>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0”<meta http-equiv=”X-UA-Compatible”content=”ie=edge”>
<title>Document</title>
<script src=”./lib/vua-2.4.0.js”></script>
</head>
<body>
<div id=”app”>
这就是通过使用属性绑定，同时子组件通过 props 定义，可以实现父组件向子组件的信息传递。
再总结一下 date 和 props 的两点区别：
第一点区别：date 上面的数据，是组件内部私有的，并不是父组件传递来的；props 当中的数据，是铜鼓父组件传递来的
第二点区别：props 是只读的，date 是可读可写的。
