当前位置：首页 > news >正文

vue知识点（4）

news 来源：原创 2025/5/9 20:44:50

依赖注入

Provide (提供)

父组件通过 provide 提供数据或方法。

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

provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>

Inject (注入)

子组件通过 inject 接收父组件提供的数据或方法。

<script setup>
import { inject } from 'vue'
// 通过注入名来查找值
const message = inject('message')
</script>

和响应式数据配合使用

// 父组件
<template>
    <div>
        <h1>父组件</h1>
        <ChildComponent />
        <button @click="updateMessage">更新消息</button>
    </div>
</template>

<script setup>
import { ref, provide } from 'vue'
import ChildComponent from '../components/ChildComponent.vue'
const message = ref('这是来自父组件的消息')
provide('messageValue', message)
const updateMessage = () => {
    message.value = '新的消息'
}
</script>

// 子组件
<template>
    <div>
        <h2>子组件</h2>
        <p>{{ injectedMessage }}</p>
    </div>
</template>

<script setup>
import { ref, inject } from 'vue'
// 注入响应式数据
const injectedMessage = inject('messageValue')
</script>

组件间的 `v-modal`

v-model 可以在组件上使用以实现数据双向绑定。defineModel() 工具函数用于简化自定义组件中 v-model 的实现，不需要再手动定义 props 和 emit 事件。

<template>
    <div>
        <h1>父组件</h1>
        <p>输入的值：{{ inputValue }}</p>
        <input type="text" v-model="inputValue" />
        <ChildComponent v-model="inputValue" />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from '../components/ChildComponent.vue'
const inputValue = ref('')
</script>

<template>
    <div>
        <h2>子组件</h2>
        <input v-model="model" />
    </div>
</template>

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

// 使用 defineModel 创建双向绑定
const model = defineModel('inputValue')
</script>

多个 `v-model` 绑定

//父组件
<template>
    <div>
        <h1>父组件</h1>
        <p>输入的值：{{ inputValue }}</p>
        <input type="text" v-model="inputValue" />
        // 可以创建多个双向绑定
        // 父组件通过 v-model:inputValue 和 v-model:modelValue 分别绑定 inputValue 和 modelValue。
        <ChildComponent
            v-model:inputValue="inputValue"
            v-model:modelValue="modelValue"
        />
        <p>子组件的值：{{ modelValue }}</p>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from '../components/ChildComponent.vue'
const inputValue = ref('')
const modelValue = ref('')
</script>

<template>
    <div>
        <h2>子组件</h2>
        <input v-model="model" />
        <input type="text" v-model="modelValue" />
    </div>
</template>

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

// 子组件通过 defineModel('inputValue') 和 defineModel('modelValue') 创建多个双向绑定。
const model = defineModel('inputValue')
const modelValue = defineModel('modelValue')
</script>