记录-vue3调用el-dialog封装子组件

<el-dialog v-model="showCameraEdit" width="400px" title="修改摄像头设置" @close="close" draggable>

const prop = defineProps({
  showCameraEdit:{
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['closeCamera'])

const showCameraEdit = ref(false)

//prop.showCameraEdit值变化时，赋值给绑定值
watch(()=>prop.showCameraEdit,()=>{showCameraEdit.value = prop.showCameraEdit})

//关闭弹窗
const close = () =>{
  emit('closeCamera', false)
}

以上弹窗子组件。

<camera-edit :showCameraEdit="showCameraEdit" @closeCamera="showCameraEdit=false">
</camera-edit>

const showCameraEdit = ref(false)//编辑弹窗显示

//打开编辑摄像头弹窗
const toEditCamera = () =>{
  showCameraEdit.value = true;
}

以上父组件。

写过几次了，每次方式还不一样，之前用computed包裹prop可以，现在又不行了，所以记录下，以便日后查询。

7.7新增：使用 toRefs() 更方便

官方文档：

 当从组合式函数中返回响应式对象时，toRefs 相当有用。使用它，消费者组件可以解构/展开返回的对象而不会失去响应性：

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // ...基于状态的操作逻辑

  // 在返回时都转为 ref
  return toRefs(state)
}

// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()

使用toRefs包裹prop:

import {ref, defineProps, toRefs} from 'vue'

const prop = defineProps({
  color: {
    type: String,
    default: 'rgba(255, 0, 0, 1)'
  }
})

const { color } = toRefs(prop)//语法糖接收父组件数据需用toRefs包裹

:color任具有响应性

以上任有问题，可忽视。

最终：

子组件：

<el-color-picker v-model="color" show-alpha @change="change"/>

const prop = defineProps({
  color: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['selectColor'])

const color = ref(prop.color)//设置不同默认值

//更改颜色
const change = () => {
  emit('selectColor', color.value)
}

父组件：

<color-picker :color="BkColor" @select-color="changeBkColor"></color-picker>

const BkColor = ref('rgba(0,0,0,1)')//背景颜色--设置默认值

//背景颜色变化
const changeBkColor = (val) =>{
  BkColor.value = val--更改prop数据
}