vue父子组件传值及回调事件

  • 父组件

引入子组件时 传值 回调方法

<template>
    ....
  //自定义组件
    <custom-chaild  :detailItem='detailItem'  @getAction="callAction" ></custom-chaild>
</template>


<script type="es6">
    methods: {
          callAction(event){
                // event 回调参数
                console.log(event)
          }
    },
</script>
  • 子组件
<template>
    ....
  
    <div>{{detailItem}}</div>

    <div  @click="childClick">回调事件</div>
</template>

<script type="es6">
    //接收父组件传值  类似data一样使用
    props: ['detailItem'],  
 
    methods: {
          childClick(){
              // 父组件 回调传参
                let childvalue = '回调参数';
               this.$emit('getAction',childvalue);
          }
    },
    mounted(){
         //获取父组件传值  
        let parents = this.$props.detailItem;
        ...
    }
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,270评论 0 25
  • 简介 angular2及以后的版本(包括angular4)都称为angular。组件之间的传值主要分为父子组件间传...
    w_tiger阅读 9,507评论 1 6
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,008评论 3 119
  • 酸奶界的乔布斯是如何练成 1 跨界整合能力 酸奶不是他发明的,他将自己家乡的特色,凭着自己的努力,将资源整合,打造...
    思远同学阅读 271评论 0 1
  • 我与他的初识早已捏碎在风里 随着风继续吹 那些愉快的不愉快的都不重要了 只有他 一尘不染的站在那里 我扑上去痛哭 ...
    荞麦皮阅读 155评论 0 0