Vue-ref与props的使用详解

<script setup>
// 定义接收的 props
defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

<template>
  <div class="child">
    <h3>{{ title }}</h3>
    <p>当前计数：{{ count }}</p>
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const parentTitle = '来自父组件的数据'
const parentCount = 5
</script>

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent 
      :title="parentTitle" 
      :count="parentCount" 
    />
  </div>
</template>

// ❌ 错误！不要这样做
props.count++ // 警告：Avoid mutating a prop directly

<!-- 子组件 -->
<script setup>
const emit = defineEmits(['update-count'])
const increment = () => {
  emit('update-count', props.count + 1)
}
</script>

<template>
  <button @click="increment">+1</button>
</template>

<!-- 父组件 -->
<ChildComponent 
  :count="count" 
  @update-count="count = $event"
/>

<script setup>
import { ref, onMounted } from 'vue'

// 创建 ref
const inputRef = ref(null)

onMounted(() => {
  // DOM 渲染完成后，inputRef.value 指向真实 DOM
  inputRef.value.focus() // 自动聚焦
})
</script>

<template>
  <input ref="inputRef" type="text" placeholder="自动聚焦输入框" />
</template>

<script setup>
import { ref } from 'vue'

const isVisible = ref(false)

// 提供方法给父组件调用
function open() {
  isVisible.value = true
}

function close() {
  isVisible.value = false
}

// 暴露给父组件
defineExpose({
  open,
  close
})
</script>

<template>
  <div v-if="isVisible" class="modal">
    <p>这是一个模态框</p>
    <button @click="close">关闭</button>
  </div>
</template>

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

const modalRef = ref(null)

const openModal = () => {
  modalRef.value.open() // 调用子组件方法
}
</script>

<template>
  <div>
    <button @click="openModal">打开模态框</button>
    <Modal ref="modalRef" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0) // ref 包装基本类型

const increment = () => {
  count.value++ // 注意：需要 .value
}
</script>

<template>
  <p>计数：{{ count }}</p>
  <button @click="increment">+1</button>
</template>

// 子组件
export default {
  props: ['title'],
  mounted() {
    this.$refs.input.focus()
  }
}

// 父组件
export default {
  methods: {
    callChild() {
      this.$refs.childModal.open()
    }
  }
}

<script setup>
// 使用 defineProps 和 ref
const props = defineProps(['title'])
const inputRef = ref(null)
</script>

// ❌ 错误
const count = ref(0)
console.log(count) // RefImpl { value: 0 }

// ✅ 正确
console.log(count.value) // 0

// ❌ 错误
props.count++

// ✅ 正确：通过事件通知父组件
emit('update:count', props.count + 1)