父子组件间相互传值

blogsky-520 2020-04-24 原文

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>子组件传值给父组件与父组件传值给子组件</title>
 6 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 7 </head>
 8 
 9 <body>
10     <template id= "tem">
11         <div>
12             <h1>组件的使用</h1>
13             <a @click="sendData">点我传值</a>
14             <a>我是父组件的数据{{name1}}</a>
15         </div>
16     </template>
17     <div id="myVue">
18         <myput :name1="name" @send="getData"></myput>
19     </div>
20     <script type="text/javascript">
21         Vue.component('myput',{
22             template:'#tem',
23             props:{
24                 name1:String
25             },
26             data:function(){
27                 return {
28                     //我是子组件的数据
29                     counter:520
30                 }
31             },
32         
33             methods:{
34                 sendData:function (){
35                     this.$emit("send",this.counter)
36                 }
37             }
38         })
39         new Vue({
40             el:'#myVue',
41             data:{
42                 //我是父组件数据
43                  name:"hello"
44             },
45             methods:{
46                 getData:function (d){
47                     alert(d)
48                     
49                 }
50             }
51             
52         })
53         
54     </script>
55 
56 </body>
57 </html>