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

vue知识点(4)

依赖注入

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 的实现,不需要再手动定义 propsemit 事件。

<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>
http://www.dtcms.com/a/65010.html

相关文章:

  • STM32F407 定时器
  • 第九课:异步爬虫进阶:aiohttp与多线程的技术博客
  • 【Java 和 Scala】-- Java 与 Scala 的 Assert 断言对比
  • AI Agent系列(四) -Agent架构认知
  • 【ODHead】BEVDet的 CenterHead的推理和拓展到蒸馏损失的算法细节
  • java后端开发day31--集合进阶(一)-----Collection集合List集合数据结构1
  • Hive SQL 精进系列:字符串拼接的三种常用方式
  • 【WRF-Chem】预处理工具(Preprocessors)总结
  • es-索引详解
  • 论文笔记 - ULTRA-SPARSE MEMORY NETWORK
  • 解决:外部调用存储过程时突然变慢,但是在sql server运行很快
  • ios打包需要的证书及步骤
  • flutter dio库 源码赏析
  • Java继承机制深度解析:子类如何继承父类及内存原理解析
  • 《A Gentle Introduction to Graph Neural Networks》-GNN的综述性论文
  • 玩转python:掌握Python数据结构之Trie树
  • Django部署Filemanagement
  • Next.js介绍(React框架)
  • 32- 两数之和 II - 输入有序数组
  • AutoGen学习笔记系列(十四)Advanced - Serializing Components
  • OpenSSL 的主要功能及其示例命令
  • Python 文件和异常(存储数据)
  • tomcat部署springboot+vue(不使用nginx)
  • 【深度学习】多源物料融合算法(一):量纲对齐常见方法
  • 贪心算法(5)(java)k次取反后最大化的数组和
  • git 撤销某次提交的上交到远程服务器的commit提交,此提交后面的commit需要保留【deeepseek生成】
  • 【SOC 芯片设计 DFT 学习专栏 -- Scan chain 和 SDFFs及 EDT】
  • sqli-lab靶场学习(八)——Less26-28
  • Android ANR 监控方法与事件分发耗时优化实战
  • vue的 props 与 $emit 以及 provide 与 inject 的 组件之间的传值对比