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

作者: 痛心凉 | 来源:发表于2017-10-11 21:12 被阅读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>

    相关文章

      网友评论

        本文标题:vue.js中子组件向父组件传递数据

        本文链接:https://www.haomeiwen.com/subject/qnjbyxtx.html