props传参简单使用

1.子给父传

子传

<script>
export default {
  data() {
    return {
       drawer: false,
        form: {
          region: '',
          region1:'',
        }
      }
    },
     methods: {
      onSubmit(){
        console.log(this.form)
        //子向父传数据
        this.$emit('onSubmit', this.form)
      },
    
    }
  }

</script>

父接收

<template>
  <div class="output">
//@onSubmit为子组件传的，onSubmit为当前页面用的
   <mainn @onSubmit="onSubmit"></mainn>
  </div>
</template>

<script>
//引入子组件
import mainn from '../components/mainn.vue'
export default {
//注册
 components:{mainn},
 methods: {
//参数data为子传来的参
   onSubmit(data) {
     console.log(data)
   }
 }
}
</script>

2.父给子传

父传

<template>
  <div class="output">
    //:msg="msg"   :msg为传给子组件的属性，msg为父组件data中的msg
   <mainn :msg='msg'></mainn>
  </div>
</template>

export default {
 components:{mainn},
 data() {
   return {
//传的数据
     msg:'szz'
   }
 },

子接受

//接收
export default {
 props:['msg'],
}
//使用
<template>
  <div>{{msg}}
  </div>
</template>