首页 > 其他分享 >provide 与 inject

provide 与 inject

时间:2023-07-11 21:55:30浏览次数:35  
标签:vue name provide car inject 组件

  • 作用:实现祖与后代组件间通信

  • 套路:父组件有一个 provide 选项来提供数据,后代组件有一个 inject 选项来开始使用这些数据

  • 具体写法:

    1. 祖组件中:

  • setup(){
    	......
        let car = reactive({name:'奔驰',price:'40万'})
        provide('car',car)
        ......
    }
    

      2.后代组件中:

  • setup(props,context){
    	......
        const car = inject('car')
        return {car}
    	......
    }
    

      

例子:

App.vue

<template>
  <div class="container">
    <h2>我是App(祖)组件</h2>
    <Child></Child>
  </div>
</template>

<script>
import {reactive,provide} from 'vue'
import Child from './components/Child';

export default {
  name: 'App',
  components:{
    Child
  },
  setup() {
    let car = reactive({name:'奔驰',price:'40w'})
   
    provide('car',car) //给自己的后代组件传递数据
    //return {car}
  }
 
}
</script>
 
<style>
  .container{
    background-color: grey;
    padding: 10px;
  }
</style>
  Child.vue
<template>
    <div class="child">
        <h2>我是child子组件</h2>
        汽车:{{car.name}},价格:{{car.price}}
        <Sun></Sun>
    </div>
</template>

<script>
import {inject} from 'vue'
import Sun from './Sun'

export default {
  name: 'Child',
  components:{
    Sun
  },
  setup() {
    
    let car = inject('car')

    return{car}
  }
 
}
</script>

<style>
    .child{
        background-color: skyblue;
        padding: 10px;
    }
</style>
  

  

Sun.vue

<template>
  <div class="sun">
    <h2>我是孙子组件</h2>
    汽车:{{name}},价格:{{price}}
  </div>
</template>

<script>
import {inject,toRefs} from 'vue'

export default {
  name: 'Child',
  setup() {
    let car = inject('car')

    return{...toRefs(car)}

  }
 
}
</script>

<style>
  .sun{
    background-color: orange;
    padding: 10px;
  }
</style>
  

  

 

 

标签:vue,name,provide,car,inject,组件
From: https://www.cnblogs.com/ixtao/p/17546044.html

相关文章

  • DVWA_Command_Injection(命令注入)-WP
    CommandInjection漏洞定义用户可以执行恶意代码语句,在实战中危害比较高,也称作命令执行,一般属于高危漏洞|命令管道符格式:第一条命令|第二条命令||第三条命令...]将第一条命令的结果作为第二条命令的参数来使用ps-aux|grep"ssh"&组合命令语法:第一条命令......
  • 错误 C2872 “IServiceProvider”: 不明确的符号
      <imgsrc="./%E6%A0%B8%E5%BC%B9/typora-user-images/image-20230628154332422.pngstyle="zoom:200%;"/><imgsrc="https://images.cnblogs.com/cnblogs_com/blogs/796407/galleries/2320826/o_230628075017_image-20230628154332422.png&q......
  • Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
    最近处理客户incident,有个客户从Spartacus4升级到5.2之后,启动Storefront,console遇到了一个错误消息:NullInjectorError-NoproviderforAnonymousConsentTemplatesAdapter!引起这个错误消息的场景有很多,这个incident最后的场景是:以前的module通过loadedforroot完......
  • 模仿Android location provider
    publicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main);((TextView)this.findViewById(R.id.textView)).setText("Somethingelse");//LocationManagerlocationManager=(LocationMa......
  • AppWidgetProvider的继承
    publicclassWlanWidgetextendsAppWidgetProvider{RemoteViewsremoteViews;AppWidgetManagerappWidgetManager;ComponentNamethisWidget;WifiManagerwifiManager;publicvoidonUpdate(Contextcontext,AppWidgetManagerappWidgetManager,in......
  • vue通信-provide&inject
    刚完成一个需求,父组件开启一个任务,开启后孙组件显示一个执行按钮,在孙组件中点击执行按钮,再到父组件中执行任务并隐藏按钮;可以使用props和emit实现,因为组件层级较多,所以考虑使用provide&inject实现父组件和孙组件的通信;以下代码记录实现过程:父组件:Parent.vue<template> <div>......
  • 什么是 SAP Commerce Cloud SmartEdit 的 webApplicationInjector.js
    SAPCommerceCloudSmartEdit是SAP提供的一种基于云的电子商务平台,旨在帮助企业轻松管理和优化他们的在线商店。SmartEdit是SAPCommerceCloud的一个功能强大的组件,用于简化网站内容的编辑和管理。通过SmartEdit,商家可以在一个易于使用的界面中轻松地修改和更新网站布局......
  • Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
    最近处理客户incident,有个客户从Spartacus4升级到5.2之后,启动Storefront,console遇到了一个错误消息:NullInjectorError-NoproviderforAnonymousConsentTemplatesAdapter!引起这个错误消息的场景有很多,这个incident最后的场景是:以前的module通过loadedfor......
  • Grafana 系列-GaC-2-Grafana Terraform Provider 基础
    系列文章Grafana系列文章Terraform系列文章概述前文最后总结了我的工具选型:GrafanaTerraformproviderJsonnet我们今天先简单介绍GrafanaTerraformprovider.GrafanaTerraformProviderGrafanaprovider为Grafana提供配置管理资源。是目前Grafana官方提供......
  • Grafana 系列-GaC-2-Grafana Terraform Provider 基础
    系列文章Grafana系列文章Terraform系列文章概述前文最后总结了我的工具选型:GrafanaTerraformproviderJsonnet我们今天先简单介绍GrafanaTerraformprovider.GrafanaTerraformProviderGrafanaprovider为Grafana提供配置管理资源。是目前Grafana官方提供......