第六章 组件 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>Documenttitle>
 9     
10     <script src=" https://cdn.jsdelivr.net/npm/vue">script>   
11   head>
12 
13   <body>
14       <div id="app">
15       
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:'

这是子组件---{{parentmsg}}

', 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>

 

转载于:https://www.cnblogs.com/songsongblue/p/11002110.html

你可能感兴趣的:(第六章 组件 63 组件传值-父组件向子组件传值和data与props的区别)