vue provide和inject使用

provide和inject使用场景也是组件传值,尤其是祖父组件--孙组件等有跨度的组件间传值,记住是单向的。孙组件不能向祖父组件传值

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject 通常是一个字符串数组。

示例:

(1)祖父组件grandpaDom.vue:

<template>
  <div>
    <father-dom :fooNew=‘fooNew‘>
    </father-dom>
  </div>
</template>
<script>
import fatherDom from "./fatherDom.vue";
export default {
  provide: {
    fooNew: "bar"
  },
  data() {
    return {};
  },
  components: { fatherDom },
  methods: {}
};
</script>

(2)父亲组件fatherDom.vue:

<template>
  <div>
    <child-dom></child-dom>
  </div>
</template>
<script>
import childDom from "./childDom.vue";
export default {
  name: "father-dom",
  components: { childDom }
};
</script>

(3)孙组件childDom.vue

<template>
  <div>
    <p>fooNew:{{fooNew}}</p>
  </div>
</template>
<script>
export default {
  name: "childDom",
  inject: ["fooNew"],
  methods: {}
};
</script>

效果:

原文地址:https://www.cnblogs.com/mengfangui/p/9995957.html

时间: 2024-10-09 03:35:53

vue provide和inject使用的相关文章

vue中使用provide和inject刷新当前路由(页面)

1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue TagViewBar.vue

vue中的依赖注入 provide 和 inject

 provide 选项允许我们指定我们想要提供给后代组件的数据/方法.在这个例子中,就是 <google-map> 内部的 getMap 方法: provide: function () { return { getMap: this.getMap }} 然后在任何后代组件里,我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性: inject: ['getMap'] 示例 // 父级组件提供 'foo'var Provider = { provide: { foo:

provide 和 inject高阶使用

provide 在祖先里授权导出 inject在后代负责接收 foo可以是本组件的函数方法 或者 变量foo 也可以是祖先组件自己 祖先组件foo: this 后代组件 foo.$options.data().msg 祖先组件 <script>export default { name: 'App', provide () { return { foo: this.zmsg } }, data () { return { zmsg: '父元素' } }}</script> 后代组件

[Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in your component options. This lesson shows you how to use them using the @Inject and @Provide decorators in tandem! When you want to provide some servic

vue 初步了解provide/inject

provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. 需要注意的是 provide / inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. (这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据.而不是局限于只能从当前父组件的prop属性来获取数据.) eg: 父组件中提供 provide() { r

vue 父组件如何给子组件的组件传值 provide inject

一般情况下我们父子之间的传值用的是props,这个就不多说了,但是如果想让父给子组件的组件传值怎么办呢,这里我们就可以用到 provide 和 inject(依赖注入) provide/inject需要一起使用,我们可以从父组件的provide传值,子组件或者孙组件,就可以用inject来接受子组件的provide属性值 具体的可以看官网介绍provide/inject 下面我们可以写个简单的例子来演示一下 父组件parent,我们在里面引入了一个子组件provideChild <templat

vue路由跳转刷新

provide /inject 组合 作用是: 允许一个祖先组件向其所有子孙后代注入一个依赖, 无论组件层次有多深,并在其上下游关系成立时间里始终生效 App.vue 文件中 修改文件 整个配置如此: <template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <

Vue高版本中一些新特性的使用详解

一.深度作用选择器( >>> ) 严格来说,这个应该是vue-loader的功能."vue-loader": "^12.2.0" 在项目开发中,如果业务比较复杂,特别像中台或B端功能页面都不可避免的会用到第三方组件库,产品有时会想对这些组件进行一些UI方面的定制.如果这些组件采用的是有作用域的CSS,父组件想要定制第三方组件的样式就比较麻烦了. 深度作用选择器( >>> 操作符)可以助你一臂之力. 前端精品教程:百度网盘下载 ?

vue之自行实现派发与广播-dispatch与broadcast

要解决的问题 主要针对组件之间的跨级通信 为什么要自己实现dispatch与broadcast? 因为在做独立组件开发或库时,最好是不依赖第三方库 为什么不使用provide与inject? 因为它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系. 然后有两种场景它不能很好的解决: 父组件向子组件(支持跨级)传递数据: 子组件向父组件(支持跨级)传递数据. 代码如下: emitter.js function broadcast(componentName,