vue3 父子组件传值(v-model避坑指南)，亲测有效！！！

一、使用场景

点击button弹出弹框，弹框是一个自定义组件「child.vue」

 

二、父组件：

1. 父组件使用 v-model 传值给子组件

// parent.vue //

<template>

<!-- 按钮 -->
<el-button @click="addMenu('new')">打开弹框</el-button>

<!-- 自定义组件,下面这两种写法都可以👇 -->
<MediaDialog :name="name" v-model:visible="dialogMediaVisible" />

</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'MediaCenter',
  setup() {
    const dialogMediaVisible: Ref = ref(false)
    const name = '🚌🚌🚌🚌🚌🚌🚌🚌🚌父组件传递的name🚌🚌🚌🚌🚌🚌🚌🚌🚌'

    const addMenu = function(status) {
      dialogMediaVisible.value = true
    }

    return {
      name,
      dialogMediaVisible,
    }
  }
})
</script>

 

 

二、子组件：

1. 子组件使用 props 接收父组件传来的值

// child.vue //

<template>
  <div>
    <!--⚠️注意这里有个大坑，一定要用 model-value，不能用v-model -->
    <el-dialog
      class="mediaDialog"
      title="我是一个弹框"
      :model-value="visible"
      :before-close="handleClose">
      <span>{{ name }}</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleClose">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, provide } from 'vue'

export default defineComponent({
  name: 'mediaDialog',
  props: {
    name: String,
    visible: Boolean
  },

  setup(props, context) {
    // 使用 context.emit('update:visible', false)，改变父组件visible的值
    const handleClose = function() {
      context.emit('update:visible', false)
    }
    return { handleClose }
  }
})
</script>

 

2. ⚠️注意

（1）这里有个大坑，<el-dialog> 中一定要用 model-value 来代替 v-model，不能用v-model，否则会报错

（2）子组件中修改父组件传入的参数 visible 时，使用 👇方式

context.emit('update:参数名', 改变的值)