vue2.0 父组件与子组件之间的数据传递和调用

1.数据传递

父组件如下

<template>

   <child :childAttr="parentAttr" :ref="child"  @listenChildEvevt="childFun" @pf="parentFun"></child>

<template>

<script>

export default {
    data(){
        return {
            parentAttr:'' //向子组件传递的值
        }
    },
    methods:{
        callChildFun(){
            this.refs.child.fun(); //父组件调用子组件方法
        },
       listenChildEvevt(data){
　　　　　　　　console.log(data)//子组件传递上来的值
       }，

      parentFun(data){
        console.log(data)//子组件调用此方法 并传递上来的值
      }

    }
}

</script>

 

子组件如下
<template>
    <div>
        {{childAttr}}
    </div>
</template>

export default {
    props:{childAttr:String},
    watch:{
        childAttr(val){
           this.parentData=val;//获取父组件传递过来的值
        }
    },
    data(){
        return {
            parentData:''
        }
    },
    methods:{
        childFun(){
            this.$emit("listenChildEvevt","要向父组件传递的值")
        }，
         submit(){
             this.$emit('pf','要传递给父组件的值')
         }
    }
}