存蓄已解决的‘漏洞’Web前端之路Web 前端开发

vue.js中子组件向父组件传递数据

2017-10-11  本文已影响18人  痛心凉
子组件通过$emit方法向父组件发送数据,子组件在父组件的模版中,通过自定义事件接收到数据,并通过自定义函数操作数据

<div id="layout">
<h1>你好{{msg}}</h1>

<tm2 @fn="get"></tm2>
</div>
<template id="tm1">
<div>
<p>11111</p>
<slot name="aa"></slot>
</div>
</template>
<template id="tm2">
<div @click="send">
22222
</div>
</template>

<script type="text/javascript">
    let tm2={
        template:"#tm2",
        data:function(){
            return{
                msg:"hello"
            
            }
        },
        methods:{
            send(){
                //触发的事件名    fn触发的事件        向父组件传递的数据  
                this.$emit("fn",this.msg)
            }
        }
    }
    new Vue({
        el:"#layout",
        components:{tm2},
        data:{
            msg:""
        },
        methods:{
            get(x){
                this.msg=x
            }
        }
        
    })
</script>
上一篇下一篇

猜你喜欢

热点阅读