1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <!--1.导入Vue的包-->
10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
11 </head>
12
13 <body>
14 <div id="app">
15 <!-- 父组件，可以在引用组件的时候，通过属性绑定（v-bind:）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
16 <com1 v-bind:parentmsg="msg"></com1>
17 </div>
18
19 <script>
20 //创建 Vue 实例，得到 ViewModel
21 var vm = new Vue({
22 el:'#app',
23 data:{
24 msg:'123 啊-父组件中数据'
25 },
26 methods:{},
27 components:{
28 //结论：经过演示，发现，子组件中，默认无法访问到 父组件中的data上的数据和methods 中的方法
29 com1:{
30 data(){//注意：子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过Ajax，请求回来的数据，都可以放到data身上；
31 //data上的数据，都是可读可写的；
32 return{
33 title:'123',
34 content:'qqq'
35 }
36 },
37 template:'<h1 @click="change">这是子组件---{{parentmsg}}</h1>',
38 //注意：组建中的所有props中的数据，都是通过父组件传递给子组件的
39 //props 中的数，都是只读的，无法重新赋值
40 props:['parentmsg'],//把父组件传递过来的parentmsg 属性，先在props数组中，定义一下，这样，才能使用这个数据
41
42 methods:{
43 change(){
44 this.parentmsg='被修改了'
45 }
46 }
47 }
48 }
49 });
50 </script>
51 </body>
52 </html>
