2018-09-20子给父传值，传（事件）

一、body部分：

 <div id="itany">
     <my-father></my-father>
 </div>

js部分：

<script src="js/vue.js"></script>
 <script>
  //父组件
    Vue.component('my-father',{
            template:`
                <div>
                    <h3>{{mess}}</h3>
                    <my-child @rec='alt'></my-child>
                </div>
            `,
        data:function(){
            return{
                mess:''
            }  
        },
        methods:{
            alt:function(txt){
                this.mess=txt
            }
        }
    })
      //子组件
    Vue.component('my-child',{
        template:`
            <button @click='add'>点击</button>
        `,
        data:function(){
            return{
                msg:'我是子组件，我要向父组件传值'
            }
        },
        methods:{
            add:function(){
                
                this.$emit('rec',this.msg)
                
// this.$emit('自定义事件名',要传输的数据)
            }
        }
    })
    
    
    new Vue({
        el:"#itany"
    })
</script>

效果：

子给父传值案例一.png

二、子给父传值练习：
body部分：

<div id="itany">
   <my-father></my-father>
  </div>

js部分：

<script src="js/vue.js"></script>
<script>
  // 父组件
    Vue.component('my-father',{
        template:`
            <div>
                <h1>这是父组件</h1>
                <p>向父组件传值内容为:{{mess}}</p>
                <my-child @send='alt'></my-child>
            </div>
        `,
        data:function(){
            return{
                mess:''
            }
                
        },
        methods:{
            alt:function(txt){
                this.mess=txt
            }
        }
        
    })
  //子组件
    Vue.component('my-child',{
        template:`
            <div>
                <h1>这是子组件</h1>
                <input type="text" v-model='msg'>
                <button @click='add'>向父组件传值</button>
            </div>
        `,
        data:function(){
            return{
                msg:''
            }
        },
        methods:{
            add:function(){
                this.$emit('send',this.msg)
            }
        }
    })
    
    new Vue({
        el:"#itany",
    })
</script>

效果：

子给父传值练习一.png