vue中v-model组件传值，子组件内props怎么接受

在Vue中，v-model:isExpand="isExpand" 是Vue 3中自定义v-model的用法，子组件需要通过props和emit来接收和更新这个值。

子组件接收方式

1. 使用 defineProps (Composition API)

<template>
  <div>
    <div v-if="isExpand">展开的内容</div>
    <button @click="toggle">切换展开状态</button>
  </div>
</template>

<script setup>
// 方式1：使用 defineProps
const props = defineProps({
  isExpand: {
    type: Boolean,
    default: false
  }
})

// 方式2：使用 TypeScript 类型标注
// const props = defineProps<{
//   isExpand: boolean
// }>()

// 定义emit事件
const emit = defineEmits(['update:isExpand'])

const toggle = () => {
  // 触发更新事件
  emit('update:isExpand', !props.isExpand)
}
</script>

2. 使用 Options API

<template>
  <div>
    <div v-if="isExpand">展开的内容</div>
    <button @click="toggle">切换展开状态</button>
  </div>
</template>

<script>
export default {
  props: {
    isExpand: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggle() {
      this.$emit('update:isExpand', !this.isExpand)
    }
  }
}
</script>

完整示例

父组件

<template>
  <div>
    <ChildComponent v-model:isExpand="isExpanded" />
    <p>父组件状态: {{ isExpanded }}</p>
  </div>
</template>

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

const isExpanded = ref(false)
</script>

子组件

<template>
  <div class="expandable">
    <div class="header" @click="toggle">
      <span>标题</span>
      <span>{{ isExpand ? '▲' : '▼' }}</span>
    </div>
    <div v-show="isExpand" class="content">
      <p>这是展开的内容...</p>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  isExpand: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:isExpand'])

const toggle = () => {
  emit('update:isExpand', !props.isExpand)
}
</script>

<style scoped>
.expandable {
  border: 1px solid #ddd;
  border-radius: 4px;
}
.header {
  padding: 10px;
  background: #f5f5f5;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.content {
  padding: 10px;
}
</style>

多个v-model绑定

你也可以同时使用多个v-model：

<!-- 父组件 -->
<template>
  <ChildComponent 
    v-model:isExpand="isExpanded" 
    v-model:isActive="isActive" 
  />
</template>

<!-- 子组件 -->
<script setup>
const props = defineProps({
  isExpand: Boolean,
  isActive: Boolean
})

const emit = defineEmits(['update:isExpand', 'update:isActive'])

const toggleExpand = () => {
  emit('update:isExpand', !props.isExpand)
}

const toggleActive = () => {
  emit('update:isActive', !props.isActive)
}
</script>

关键点总结

1. props接收：通过 isExpand prop接收值
2. emit更新：通过 update:isExpand 事件更新值
3. 命名规范：事件名必须是 update:propName 格式
4. 双向绑定：这样就实现了父组件和子组件之间的双向数据绑定

这种方式比传统的 .sync 修饰符更加明确和直观，是Vue 3推荐的做法。