父传子 新方法:给所有后代组件传递参数 ,采用vue中边界处理情况的 [依赖注入]

217 阅读1分钟

1. 父组件 index.vue 给所有子组件传参,采用vue中边界处理情况的 依赖注入

    // 父组件给所有子组件传参
    provide: function () {
    return {
      articleId: this.articleId
    }
    },
  

image.png

2. 子组件 这样来接收并使用,如果不接收 是无法使用的

     // 接收父组件通过依赖注入传过来的 文章id参数
      inject: {
        articleId: {
          type: [Number, String, Object],
          default: null
        }
      },
  

使用的时候 要进行判断一下,不然如果参数不存在 就报错 image.png

3. 如果父组件没有传参,子组件接收了,就是null 不影响

image.png