登录  /  注册
首页 > web前端 > js教程 > 正文

vue中provide/inject使用案例分析

php中世界最好的语言
发布: 2018-05-22 14:55:55
原创
1185人浏览过

这次给大家带来vue中provide/inject使用案例分析,vue中provide/inject使用的注意事项有哪些,下面就是实战案例,一起来看一下。

前言

最近在看element-ui的源码,发现了一个这样的属性:inject.遂查看官网provider/inject

provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。

需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

下面我们来验证下猜想:

first:定义一个parent component

<template>
 <p>
<childone></childone>
 </p>
</template><script>
 import childOne from &#39;../components/test/ChildOne&#39;
 export default {
  name: "Parent",
  provide: {
   for: "demo"
  },
  components:{
   childOne
  }
 }</script>
登录后复制

在这里我们在父组件中provide for这个变量。

second 定义一个子组件

<template>
 <p>
  {{demo}}
  <childtwo></childtwo>
 </p>
</template><script>
 import childtwo from &#39;./ChildTwo&#39;
 export default {
  name: "childOne",
  inject: [&#39;for&#39;],
  data() {
   return {
    demo: this.for
   }
  },
  components: {
   childtwo
  }
 }
</script>
登录后复制

third 定义另一个子组件

<template>
 <p>
  {{demo}}
 </p>
</template><script>
 export default {
  name: "",
  inject: [&#39;for&#39;],
  data() {
   return {
    demo: this.for
   }
  }
 }
</script>
登录后复制

在2个子组件中我们使用jnject注入了provide提供的变量for,并将它提供给了data属性。

这里官网注明例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时,注入的值会在 props 和 data 初始化之后得到。

运行之后看下结果

从上面这个例子可以看出,只要在父组件中调用了,那么在这个父组件生效的生命周期内,所有的子组件都可以调用inject来注入父组件中的值。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JavaScript DOM元素增删改步骤详解

Vue使用vee-validate验证表单步骤详解

以上就是vue中provide/inject使用案例分析的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号