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

子组件通过$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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容