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

作者: OnceWhite | 来源:发表于2018-07-02 10:59 被阅读43次

父组件

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

<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>