最簡單的子傳父組件

子傳父 用事件傳，這個事件是自定義事件 用$emit("事件"，參數(shù))來表示

 <div id="app">
    <my-father></my-father>
 </div>
<script src="js/vue.js"></script>
<script>
    Vue.component("my-father",{
        template:`
                <div>
                    <h1>我是父組件</h1>
                    <span>這里是內(nèi)容:</span>
                    <a href="#">{{msgg}}</a>
                    <my-child @send="fun2"></my-child> 
                    //綁定了子組件中的send事件，并將fun2的內(nèi)容賦給send，點擊將觸發(fā)
                </div>
            `,
        data:function(){ //定義一個假的數(shù)據(jù)，在下面賦值用
            return{
                msgg:""
            }
        },
        methods:{
            fun2:function(tex){ //形參
                this.msgg=tex
            }
        }
    })
    Vue.component("my-child",{
        template:`
        <div>
                <h1>我是子組件</h1>
                <input type="text" v-model="msg">
                <button @click="fun">添加進去</button>
         </div>
            `,
        data:function(){
            return{
                msg:""
            }
        },
        methods:{
            fun:function(){
                this.$emit("send",this.msg); //這里的this.msg當成實參傳給上面的形參
                this.msg=""
            }
        }
    })
    new Vue({
        el:"#app"
    })
</script>

QQ截圖20180921190754.png