vue3.2中父子组件绑定

最新推荐文章于 2024-11-28 10:55:56 发布

原创最新推荐文章于 2024-11-28 10:55:56 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #vue

父组件

<template>
  <!-- 展示弹出层 -->
  <div>
    <SelectColor v-model="selectColorVisible"></SelectColor>
  </div>
</template>

<script setup>
import SelectColor from './components/SelectColor.vue'
import { ref } from 'vue'

const selectColorVisible = ref(false)
const handleSetTheme = command => {
  selectColorVisible.value = true
}
</script>

<style lang="scss" scoped></style>

子组件

vue3 中子组件默认接收值为 modelValue

<template>
  <el-dialog title="提示" :model-value="modelValue" @close="closed" width="22%">
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closed">{{ $t('msg.universal.cancel') }}</el-button>
        <el-button type="primary" @click="comfirm">{{
          $t('msg.universal.confirm')
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue'
import { useStore } from 'vuex';
defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
})
const emits = defineEmits(['update:modelValue'])


/**
 * 关闭
 */
const closed = () => {
  // 子组件通知父组件关闭dialog
  emits('update:modelValue', false)
}
/**
 * 确定
 * 1. 修改主题色
 * 2. 保存最新的主题色
 * 3. 关闭 dialog
 */
const comfirm = async () => {
  
  // 3. 关闭 dialog
  closed()
}
</script>

<style lang="scss" scoped>
.center {
  text-align: center;
  .title {
    margin-bottom: 12px;
  }
}
</style>