2018-09-21 vue初学八(组件子传父)

最简单的子传父组件

子传父 用事件传，这个事件是自定义事件 用$emit("事件"，参数)来表示

 <div id="app">
    <my-father></my-father>
 </div>
<script src="js/vue.js"></script>
<script>
    Vue.component("my-father",{
        template:`
                <div>
                    <h1>我是父组件</h1>
                    <span>这里是内容:</span>
                    <a href="#">{{msgg}}</a>
                    <my-child @send="fun2"></my-child> 
                    //绑定了子组件中的send事件，并将fun2的内容赋给send，点击将触发
                </div>
            `,
        data:function(){ //定义一个假的数据，在下面赋值用
            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