vuejs 子组件传递父组件的第二种方式

时间:2023-03-08 20:11:09
vuejs 子组件传递父组件的第二种方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-dmeo</title>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="page">
        <hellow></hellow>
        {{arr|json}}
    </div>
    <script type="text/javascript" src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
    <script>
       var  handle= function(){
               var hellow = {
               	     template:"<div style='color:#f00;text-align:center;'><input type='text' v-model='mess' /><button @click='csend()'>点击</button>{{mess}}</div>",
               	     data:function(){
               	     	return {
               	     		mess:''
               	     	}
               	     },
               	     methods:{
               	     	csend:function(){
               	     		if(this.mess.trim()){
               	     			 this.$dispatch('handleIt',this.mess)
               	     			 this.mess='';
               	     		}
               	     	}
               	     }
               }

               return new Vue({
                    el:"#page",
                    data:{
                       arr:[],
                    },
                    methods:{

                   },
                   events:{
                   	  "handleIt":function(msg){
                          this.arr.push(msg);
                      }
                   },
                   components:{
                       hellow:hellow,
                    }
                })
       }()

    </script>
</body>
</html>