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>
父子组件间相互传值
猜你喜欢
转载自www.cnblogs.com/blogsky-520/p/12765101.html
今日推荐
周排行