码迷,mamicode.com
首页 > 其他好文 > 详细

vue provide和inject使用

时间:2018-11-21 17:50:45      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:字符串数组   mil   对象   method   def   alt   inject   效果   bsp   

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>

效果:

技术分享图片

 

 

vue provide和inject使用

标签:字符串数组   mil   对象   method   def   alt   inject   效果   bsp   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!