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>