Vue父子组件传值（props）_vue的modalobj 传值-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_60666754/article/details/134446474

本文详细描述了在Vue应用中，如何通过父子组件间的props和事件进行数据传递以及子组件触发父组件方法的实例。展示了`<a-modal>`和自定义事件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

父组件

<template>
  <a-card :bordered="false">
    <!-- 父组件 -->
   <a-button @click="addProduct">父组件</a-button>
    <!-- 子组件 -->
    <SemiProduct ref="semiProduct" :formData="formData" @hideProduct="hideProduct" />
    {{ obj }}
  </a-card>
</template>
<script>
import SemiProduct from './components/semiProduct.vue'
export default {
  components: {
    SemiProduct
  },
  data() {
    return {
      formData:'',
      obj:{},
    }
  },
  methods: {
     addProduct() {
      this.formData = '子组件子组件子组件'
      this.$refs.semiProduct.addProduct()
    },
    hideProduct(obj) {
      this.obj = obj
      console.log(obj,'子组件传过来的值')
    },
  }
}
</script>

子组件

<template>
    <a-modal v-model="showProduct" v-if="showProduct" title="子组件" ok-text="确认" cancel-text="取消" :width="1200"
        @ok="hideProduct" destroyOnClose>
        <h1>我是子组件 {{ formData }}</h1>
    </a-modal>
</template>
<script>
export default {
    props: {
        formData: {
            type: String,
            default: '',
        },
    },
    data(){
        return{
            showProduct:false,
        }
    },
    methods: {
        addProduct(){
            this.showProduct = true
        },
        hideProduct() {
            this.showProduct = false
            let obj = {
                type:'子组件向父组件传值'
            }
            this.$emit('hideProduct', obj)
        }
    }
}
</script>