VUE参考---父组件向子组件传递数据
一、总结
一句话总结：
1、在使用组件的位置通过v-bind向子组件传递数据：<com1 v-bind:parentmsg="msg"></com1>
2、在子组件的props中注册父组件传过来的数据：props: ['parentmsg']
3、子组件中使用传递过来的数据：template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>',
<div id="app"> <!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 --> <com1 v-bind:parentmsg="msg"></com1> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '123 啊-父组件中的数据' }, methods: {}, components: { // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法 com1: { data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上； // data 上的数据，都是可读可写的； return { title: '123', content: 'qqq' } }, template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>', // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的 // props 中的数据，都是只读的，无法重新赋值 props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据 directives: {}, filters: {}, components: {}, methods: { change() { this.parentmsg = '被修改了' } } } } }); </script>
1、子组件data和props属性中数据的区别？
a、子组件data是自身私有的，比如通过ajax获取的，data上的数据可读可写
b、子组件props属性中的数据是从父组件身上传过来的，props上的数据是只读的
二、父组件向子组件传递数据
博客对应课程的视频位置：
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 <script src="./lib/vue-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 --> 15 <com1 v-bind:parentmsg="msg"></com1> 16 </div> 17 18 <script> 19 // 创建 Vue 实例，得到 ViewModel 20 var vm = new Vue({ 21 el: '#app', 22 data: { 23 msg: '123 啊-父组件中的数据' 24 }, 25 methods: {}, 26 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 directives: {}, 42 filters: {}, 43 components: {}, 44 methods: { 45 change() { 46 this.parentmsg = '被修改了' 47 } 48 } 49 } 50 } 51 }); 52 </script> 53 </body> 54 55 </html>