第七章路由 80 复习-父子组件之间的传值

最新推荐文章于 2024-09-28 17:32:53 发布

weixin_30675247

最新推荐文章于 2024-09-28 17:32:53 发布

阅读量68

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/songsongblue/p/11010366.html

版权

 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       <com1 v-bind:parentmsg="msg" @func="getMsgFormSon"></com1>
16       </div>
17 
18     <template id="tmp1">
19         <div>
20           <h1>这是子元素 --- {{parentmsg}}</h1>
21           <input type="button" value="向父组件传递消息" @click="sendMsg">
22         </div>
23     </template>
24 
25       <script>
26 
27       var com1={
28         template:'#tmp1',
29         data(){
30           return{
31             msg:'做一个孝顺的孩纸，给父组件一些钱去挥霍吧！'
32           }
33         },
34         props:['parentmsg'],
35         methods:{
36           sendMsg(){
37             this.$emit('func',this.msg)
38           }
39         }
40       }
41 
42           //创建 Vue 实例，得到 ViewModel
43           var vm =  new Vue({
44               el:'#app',
45         data:{
46           msg:'这是父组件中的数据',
47           msgFormSon:''
48         },
49         methods:{
50           getMsgFormSon(data){
51               this.msgFormSon=data
52               console.log(this.msgFormSon)
53           }
54         },
55         components:{
56           com1
57         }
58           });
59       </script>
60   </body>
61 </html>