README-Vue-Extends.md

vue extends

• A: PositionMain.vue: 入口组件
• B: PositionHomeViewCard.vue: 中间组件
• C: BasePostiionCard.vue: Base 组件
• 其中, A组件 调用 B组件
• B组件 extends C组件

extends - prop

• A组件像B组件传递的Props, 如果在 C组件已经定义了,就不需要声明
• A组件像B组件传递的Props, 如果在 C组件中没有定义, 可以声明, 同时 Props可以被 C组件的模板部分使用
• 但如果 C组件在 script 想使用, 那么依然需要定义在 C组件的 Prop中

💛 extends - template

• 如果B组件中有template,那么 A组件中渲染的是B组件中template中的内容
• 如果B组件没有template,那么 A组件中渲染的是C组件中template中的内容
• 同样的, B组件 可以渲染 A组件传递过来的任何prop属性,而不用去定义.

extends - mechanism

• B组件 是在重写 C组件定义的各个state,computed,method
• C组件只需要定义这些值就可以了.(接口定义级别)
• B组件的值会覆盖C组件的值和方法执行
• C组件会使用被B组件重写(overwrite)后的值
• 关于template, 参考 💛 extends - template