vue基础扩展7--provide和reject

最新推荐文章于 2024-04-24 20:12:25 发布

野生技术协会

最新推荐文章于 2024-04-24 20:12:25 发布

阅读量762

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/shuixiou1/article/details/112689663

版权

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <title>vue基础扩展7--provide和reject</title>
</head>

<body>
  <script>
    // 1、基本使用范例
    var Provider = {
      data() {
        return {
          x: 'test'
        }
      },
      // 父组件可以直接使用对象，对象包含需要提供的key：“value”
      provide: {
        foo: 'bar'
      },
      // 可是设置provide 为一个函数，函数返回一个provide属性，this指向vue实例，所以可以调用组件data里的值得
      provide() {
        return {
          a: this.x
        }
      },
    };

    // 子组件注入 'foo'
    var Child = {
      // inject可以是一个数组，数组里包含需要注入的key的字面量
      inject: ['foo'],
      // inject 可以是一个对象
      inject: {
        foo: 'foo'
      },
      // inject 可以设置默认值，所以可以inject的指可以在provide里不存在
      inject: {
        foo: { default: 'default value' }
      },
      // default 值也可是一个有返回值的函数
      inject: {

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

野生技术协会

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
vue基础扩展7--provide和reject

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>vue基础扩展7--provide和reject</title></head><body> <script> // 1、基本使用范例 var Provider = { data() { return { ..
复制链接

扫一扫