Vue: async рд▓реЛрдб рдХрд┐рдП рдЧрдП рдШрдЯрдХ рдХреЛ рд░реЗрдВрдбрд░ рдХрд░рдиреЗ рд╕реЗ attrs рдореЗрдВ рдкрд░рд┐рд╡рд░реНрддрди рд╣реЛ рд░рд╣рд╛ рд╣реИред

рдХреЛ рдирд┐рд░реНрдорд┐рдд 16 рд╕рд┐рддре░ 2019  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: vuejs/vue

рд╕рдВрд╕реНрдХрд░рдг

2.6.10

рдкреНрд░рдЬрдирди рд▓рд┐рдВрдХ

https://codesandbox.io/s/vue-template-7hwty

рдкреНрд░рдЬрдирди рдХрд░рдиреЗ рдХрд┐ рдкреНрд░рдХреНрд░рд┐рдпрд╛

  1. рд░реЗрдВрдбрд░ рдлрд╝рдВрдХреНрд╢рди рдХреЗ рд╕рд╛рде рдШрдЯрдХ рдмрдирд╛рдПрдВ рдЬреЛ рд╕рдордп рдХреЗ рдмрд╛рдж рдХрд┐рд╕реА рдЕрдиреНрдп рдШрдЯрдХ рдХреЛ рдкреНрд░рд╕реНрддреБрдд рдХрд░ рд╕рдХреЗред
  2. рд╡рд╛рджрд╛ рд╕рдорд╛рдзрд╛рди/рд╕рдордп рд╕рдорд╛рдкреНрдд рд╣реЛрдиреЗ рдХреЗ рдмрд╛рдж рд░реЗрдВрдбрд░рд┐рдВрдЧ рдШрдЯрдХ рджреЛ рдмрд╛рд░ рд░реЗрдВрдбрд░ рдХрд░рдиреЗ рдФрд░ $attrs рдкрд░рд┐рд╡рд░реНрддрди рдХрд╛ рдХрд╛рд░рдг рдмрди рд░рд╣рд╛ рд╣реИ рдпрджрд┐ рдЪрд╛рдЗрд▓реНрдб рдХрдВрдкреЛрдиреЗрдВрдЯ рдореЗрдВ attr рдХреЗ рдмрд░рд╛рдмрд░ рдХреБрдВрдЬреА рд╡рд╛рд▓рд╛ рдХреЛрдИ рдкреНрд░реЛрдк рд╣реИред
  3. рд▓рдХреНрд╖реНрдп рдХреЙрдореНрдкреЛрдиреЗрдВрдЯ рдореЗрдВ рдЯрд┐рдкреНрдкрдгреА рдкреНрд░реЛрдк рдФрд░ рдкреГрд╖реНрда рдкреБрдирдГ рд▓реЛрдб рдХрд░реЗрдВред
  4. рд╕рднреА attrs рдлрд┐рд░ рд╕реЗ рдареАрдХ рд╣реИрдВред

рдХреНрдпрд╛ рдЕрдкреЗрдХреНрд╖рд┐рдд рд╣реИ?

рд░реЗрдВрдбрд░ рдлрд╝рдВрдХреНрд╢рди рдХреЛ рдПрдХ рдмрд╛рд░ рдХреЙрд▓ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдФрд░ рдШрдЯрдХ рдХреЗ $attrs рдХреЛ рдирд╣реАрдВ рдмрджрд▓рд╛ рдЬрд╛рддрд╛ рд╣реИред

рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреНрдпрд╛ рд╣реЛ рд░рд╣рд╛ рд╣реИ?

рд░реЗрдВрдбрд░ рдХреЛ рджреЛ рдмрд╛рд░ рдХреЙрд▓ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдФрд░ attrs рдЬрд┐рд╕рдХреА рдХреБрдВрдЬреА рд╕рдорд╛рди рд╣реЛрддреА рд╣реИ props рдЪрд╛рдЗрд▓реНрдб рдХрдВрдкреЛрдиреЗрдВрдЯ рдХреЛ рд╣рдЯрд╛ рджрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред


рдореИрдВрдиреЗ рдЕрдкрдиреЗ рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдХрд╕реНрдЯрдо рд▓реЛрдбрд░ рдШрдЯрдХ рдкрд░ рдмрдирд╛рдпрд╛ рд╣реИ рдЬрд┐рд╕реЗ рдЖрд▓рд╕реА рд▓реЛрдб рдХрд┐рдП рдЧрдП рдШрдЯрдХреЛрдВ рдФрд░ рдиреЗрдЯрд╡рд░реНрдХрд┐рдВрдЧ рддреНрд░реБрдЯрд┐рдпреЛрдВ рдХреА рд▓реЛрдбрд┐рдВрдЧ рдХреЛ рд╕рдВрднрд╛рд▓рдирд╛ рд╣реИ, рдХреНрдпреЛрдВрдХрд┐ рдореИрдВ https://vuejs.org/v2/guide/components-dynamic-async.html#Handling -Loading рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ -рдореЗрд░реЗ рдорд╛рдорд▓реЗ рдореЗрдВ рд░рд╛рдЬреНрдпред рдбрд╛рдЙрдирд▓реЛрдб рдХрд┐рдП рдЧрдП рдШрдЯрдХ рдХреЛ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛рд╢реАрд▓рддрд╛ (рдЪрд░ рдХреЗ рд░реВрдк рдореЗрдВ рдбреЗрдЯрд╛ рдХреЗ рдмрд╛рд╣рд░) рдореЗрдВ рди рдЬреЛрдбрд╝рдХрд░ рдЗрд╕ рдмрдЧ рдХреЛ рдЫреЛрдбрд╝рд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред

рд╕рднреА 4 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

$attrs : {...this.$attrs} рдПрдХ рдкреНрд░рддрд┐ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рд╕реЗ рднреА рд╕рдорд╕реНрдпрд╛ рджреВрд░ рд╣реЛ рдЬрд╛рддреА рд╣реИ

рд╢рд╛рдпрдж рдЖрдкрдХреЛ рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╣рд▓ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкреНрд░реЙрдкреНрд╕ рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдПя╝Ъ

  render(h) {
    console.log("Attributes of loader:", this.$attrs);
    if (this.targetComponent) {
      return h(this.targetComponent, {
        props: this.$attrs  // Change attrs to propsя╝Мnot `attrs: this.$attrs`
      });
    } else {
      return h("div", "Component is loading");
    }
  }

рдХреНрдпреЛрдВрдХрд┐ рдЖрдк рд╕рд╣рд╛рд░рд╛ рд▓реЗрдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣реЗ рд╣реИрдВ

const targetComponent = {
  props: {
    // COMMENT PROP
    someProp: {
      type: String
    }
  },
  render(h) {
    console.log("Props of target", this.$props); // You can not get $props when render params only has attrs
    return h("div", "WITH PROP:" + this.someProp);
  }
};

рджреЛрдиреЛрдВ рдПрдЯреНрд░реНрд╕ рдХреА рдХреЙрдкреА рдмрдирд╛рдиреЗ рдФрд░ рдкреНрд░реЙрдкреНрд╕ рдХреЗ рд╕рд╛рде рдЧреБрдЬрд░рдиреЗ рд╕реЗ рдореЗрд░реА рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рдорд╛рдзрд╛рди рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдореИрдВ рдЕрднреА рднреА рдЙрддреНрд╕реБрдХ рд╣реВрдВ рдХрд┐ рдореВрд▓ рдШрдЯрдХ $attrs рдмрдЪреНрдЪреЗ рдХреЛ рд░реЗрдВрдбрд░ рдХрд░рдиреЗ рдХреЗ рдХрд╛рд░рдг рдХреНрдпреЛрдВ рдмрджрд▓ рд░рд╣реЗ рд╣реИрдВ рдЬрд┐рд╕рдореЗрдВ рдПрдХ рд╣реА рдХреБрдВрдЬреА рдХреЗ рд╕рд╛рде рдкреНрд░реЙрдкреНрд╕ рд╣реЛрддреЗ рд╣реИрдВ?

рдРрд╕рд╛ рдЗрд╕рд▓рд┐рдП рд╣реИ рдХреНрдпреЛрдВрдХрд┐ $attrs рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЛ рдлрд┐рд░ рд╕реЗ рдЕрд╕рд╛рдЗрди рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред рдореБрдЭреЗ рдкрддрд╛ рдерд╛ рдХрд┐ рдореИрдВрдиреЗ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдкрд╣рд▓реЗ рд╣реА рдХрд╣реАрдВ рдФрд░ рджреЗрдЦрд╛ рд╣реИ:
https://github.com/vuejs/vue/issues/10115 рдХрд╛ рдбреБрдкреНрд▓рд┐рдХреЗрдЯ

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕