第六章 组件 63 组件传值-父组件向子组件传值和data与props的区别
Posted songsongblue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第六章 组件 63 组件传值-父组件向子组件传值和data与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 <!--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>
以上是关于第六章 组件 63 组件传值-父组件向子组件传值和data与props的区别的主要内容，如果未能解决你的问题，请参考以下文章