vue子到父之间的传值 2018-11-05

1.子到父之间的传值通过在子组件上绑定自定义事件(<v-child @index = 'huoqu'></v-child>),在子组件中事件中通过this.$emit("index",this.str)    this.$emit("要推送给那个事件",要推送的内容)  然后在父组件中通过事件"huoqu"来接受参数,"huoqu"事件中的参数,就是子组件传值传过来的参数:

huoqu(msg){

    msg就是子组件传过来的参数        这个函数写在父组件中

};

例子如下:

<div id="out">

        <v-parent></v-parent>

</div>

<template id="parent">

    <div>

        <h3>父组件</h3>

        <p>{{str}}</p>

        <hr>

        <v-child @index = 'huoqu'></v-child>

    </div>

</template>

<template id="child">

    <div>

        <h3>子组件</h3>

        <p>{{str}}</p>

        <button @click="tap()">发送数据</button>

    </div>

</template>

</body>

<script type="text/javascript">

    var vm = new Vue({

        el:'#out',

        components:{

        'v-parent':{

            template:'#parent',

            data:function(){

                return{

                    str:''

                    }

            },

methods:{

            huoqu:function(msg){

                    this.str = msg

                    }

                },

components:{

    'v-child':{

        template:'#child',

    data:function(){

            return{

                str:'我是子组件'

                }

        },

methods:{

    tap(){

        this.$emit('index',this.str)

            }

        }

    }

}

}

}

})

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,242评论 0 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,079评论 0 29
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 5,652评论 0 32
  • 心想事成——是一门艺术 一、定位:敬畏 听了核聚的《心想事成-是一门艺术》这节千聊课程,感觉很有收获。...
    依盈阅读 138评论 0 0
  • 女儿十八岁了!做母亲的我心里满是幸福、欣悦、希冀,可是我也更清醒地知道从此以后我已不能再像以往日日与她相伴不离,我...
    雪地飞狐阅读 358评论 0 4