<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--父组件，可以在引用子组件的时候，通过属性绑定（v-bind:）的形式，把需要传递给子组件的数据以属性绑定的形式传递到子组件内部，供子组件使用-->
<son v-bind:parentmsg="msg"></son>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:'这是父组件中的数据'
},
components:{
//子组件中默认无法访问到父组件中的data上的数据和methods中的方法
son:{
//子组件中的data数据，并不是通过父组件传递过来的，而是子组件自己私有的，比如：子组件通过AJAX，请求回来的数据，都可以放到data身上；
data(){
return{
title:'一二三',
}
},
//注意：组件中的所有props中的数据，都是通过父组件传递给子组件的
//把父组件传递过来的parentmsg属性，先在props数组中，定义一下，才能使用这个数据
//props中的数据都是只读的，无法重新赋值，而data中的数据都是可读可写的
props:['parentmsg'],
template:"<h1 @click='change'>这个是子组件----{{parentmsg}}</h1>",
methods:{
change(){
//此操作不可以，因为props里面的数据是只读的
this.parentmsg="修改";
}
}
}
}
})
</script>
</body>
</html>
