vue3中的provide

这篇具有很好参考价值的文章主要介绍了vue3中的provide。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  • 作用:实现祖孙件通信
  • 套路:父组件有一个provide选项来提供数据,子组件有一个inject选项来开始使用这些数据
  • 具体写法:

祖组件中:

<template>
  <div class="lim">
    <h2>祖组件</h2>
    <child></child>
    名字:{{ car.name }}
    <br>
    价格:{{ car.price }}
    <br>
    <el-button @click="car.price++">价格增加</el-button>

  </div>
</template>

<script setup>
import Child from './child.vue'
import { provide, reactive } from 'vue'

const car = reactive({
  name: '车',
  price: '40'
})

// 给自己的后代组件传入数据
provide('car', car)
</script>

child:

<template>
  <div class="lim">
    <h2>子组件</h2>
    <el-text>子组件中获取的数据:</el-text>
    {{ car }}
    <br>
    子组件这里获取到了,而且还是响应式的
  </div>
</template>
<script setup>
import { inject } from 'vue'

let car = inject('car')
</script>

run:
vue3中的provide,前端,vue,note,vue.js,javascript,前端

当然,如果存在子组件的子组件,也是可以直接获取到其上一级上一级的组件
child:

<template>
  <div class="lim">
    <childchild></childchild>
    <h2>子组件</h2>
    <el-text>子组件中获取的数据:</el-text>
    {{ car }}
    <br>
    子组件这里获取到了,而且还是响应式的
  </div>
</template>
<script setup>
import { inject } from 'vue'
import Childchild from './childchild.vue'

let car = inject('car')
</script>

childchild:

<template>
<div class="lim">
  <h2>孙组件</h2>
  <code>
    孙组件中接收的值:
    car:{{ car }}
  </code>
</div>
</template>
<script setup>
import { inject } from 'vue'

let car = inject('car')
</script>

vue3中的provide,前端,vue,note,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-548664.html

到了这里,关于vue3中的provide的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(79)
  • 前端HTML、CSS、JS、VUE3 汇总

    学习https://developer.mozilla.org/zh-CN/docs/Learn/CSS 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 使用VS Code运行前端代码 在VS Code上安装前端插件 正在更新中~ ✨ 提示:这里可以添加本文要记录的大概内容: 学习路线 知识定位 HTML基础 标签、表格、表单、

    2024年02月13日
    浏览(51)
  • vue3的provide

    provide  和 inject 通常成对一起使用,使一个祖先组件作为其后代组件的依赖注入方,无论这个组件的层级有多深都可以注入成功,只要他们处于同一条组件链上。 provide:提供一个值,可以被后代组件注入。 inject:注入一个由祖先组件或整个应用 (通过  app.provide() ) 提供的

    2024年02月10日
    浏览(30)
  • Vue3 关于 provide、inject 的用法

    前言: 在前端项目中牵扯的最多的莫过于组件之间的传值了,除了最最常用的 props 和 emit ,其实在 Vue 中还额外提供了另外几种方法。今天分享一种组件之间通信的方法。 先别着急考虑标题这个 api 的含义。在这里我先动手写一个比较常见的场景。 所对应的组件内部代码比

    2024年02月06日
    浏览(40)
  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(54)
  • vue3-provide和inject

    1.作用场景: 顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信 2.跨层传递普通数据 1.顶层组件通过provide函数提供数据 2.底层组件通过inject函数获取数据 顶层组件 底层组件 3.跨层传递响应数据 顶层组件 底层组件 4.跨层传递方法 顶层组件可以向底层组件传递方

    2024年01月19日
    浏览(47)
  • VueUse 是怎么封装Vue3 Provide/Inject 的?

    Provide 和 Inject 可以解决 Prop 逐级透传问题。注入值类型不会使注入保持响应性,但注入一个响应式对象,仍然有响应式的效果。 Provide 的问题是无法追踪数据的来源,在任意层级都能访问导致数据追踪比较困难,不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层

    2024年02月03日
    浏览(45)
  • 【vue3】vue3的三种写法(附带provide/inject、toRefs说明、ref,reactive的区别)

    写法一(vue3的写法) toRefs定义: toRefs可以将对象(只能接收rective对象)中的属性变成响应式。 正常reactive对象数据也是响应式的,如果用toRefs解构出去会更加方便。 toRefs什么时候用? 数据量如果很多, 我们一般会用解构来简化代码, 那么在vue3 中如果使用对象的解构,

    2024年02月13日
    浏览(49)
  • note_前端框架Vue的安装和简单入门(Windows 11)

    (1) 下载安装node.js和npm (2) 使用npm下载安装vue 下面两张图分别展示了项目的创建过程(图1)和创建完成后的目录文件(图2)。 图1. 执行 web init webpackage 后需要依次配置的选项。包括项目名、项目简介、作者、build类型、是否安装vue-router、是否使用ESLint检查代码、ESLint类型、

    2024年02月10日
    浏览(39)
  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包