vue 中provide的用法_vue高阶用法之provide与inject

1、这个两个必须同时使用，当父组件定义的方法，子组件也想使用怎么办了，这时候就可以派上用场了

provide：Object | () => Object

inject：Array | { [key: string]: string | Symbol | Object }

父组件中

id="app"

v-if="isRouterAlive"

export default {

name: 'App',

components: {

data () {

return {

isShow: false,

isRouterAlive: true

// 父组件中返回要传给下级的数据

provide () {

return {

reload: this.reload

}

methods: {

reload () {

this.isRouterAlive = false

this.$nextTick(() => {

this.isRouterAlive = true

})

}

子组件中

:id="id"

@success="successHandle"

将被分配给

slot="reference"

class="unite-btn"

指派

import PopupAssign from '../PopupAssign'

export default {

//引用vue reload方法

inject: ['reload'],

components: {

PopupAssign

methods: {

// ...mapActions(['freshList']),

async successHandle () {

this.reload()

}

这样就实现了子组件调取reload方法就实现了刷新vue组件的功能,个人认为它实现了组件跨越组件传递数据方法。

vue 中provide的用法_vue高阶用法之provide与inject相关推荐

ifdef的用法_chisel 高阶用法简介--rocket-chip generator
本文将介绍chisel的三个高阶用法:diplomacy,cake pattern和参数化. diplomacy 什么是diplomacy?互联参数的自动协商. 痛点在哪里: 传统的SoC集成中,互联 ...
【性能测试】如何用一条命令完全掌握linux系统性能监控（top高阶用法）
目录一引言二 top命令高阶用法场景1:采样3次,采样间隔为10s: 场景2:采样2h,采样间隔为10s,性能数据保存到test.csv文件中: 一引言熟悉CentOS linux ...
Peewee 高阶用法
Peewee 高阶用法前言本文介绍的Peewee方法语法基于PostgreSQL 高阶用法元组多条件查询 from peewee import Tuple e.g.: 1. model.sele ...
python mockito arg_that_编程高阶用法–开发者高频词汇
开发者总会在开发时遇到变量命名困难或者命名冗长庸俗的时候. 阅读代码过程中遇到一些很好的命名,也遇到一些不好的. 当初并没有记录下来,之后才开始记录,有的也找不到出处了.以下高频词汇供有追求的开发者参 ...
React之ref的高阶用法
forwardRef转发Ref forwardRef的初衷就是解决ref不能跨层级捕获和传递的问题,forwardRef接受了父级元素标记的ref信息,并把它转发下去,使得子组件可以通过props来接 ...
JS中常见的几种高阶函数
1.什么是高阶函数? 高阶函数英文叫Higher-order function.JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一 ...
vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
从列表页 ------> 详情页, 再从详情页 -----> 列表页 ,要保存上次已经加载的数据和自动还原上次的浏览位置 1. 缓存组件,vue2中提供了keep-alive.首先在我们的 ...
vue中create 什么触发_vue中eventbus被多次触发（vue中使用eventbus踩过的坑）
一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B.(我知道,小参数的 ...
vue 中的el表达式_Vue中vue.filter()的使用方法介绍（过滤）
本篇文章给大家带来的内容是关于Vue中vue.filter()的使用方法介绍(过滤),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Vue过滤器 {{msg |msgFormat}} ...

vue 中provide的用法_vue高阶用法之provide与inject

vue 中provide的用法_vue高阶用法之provide与inject相关推荐

最新文章

热门文章