vue from entry to the proficient Basics (b) Components

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/u013205165/article/details/91790336

(1) using the sub-assembly

Rendering component - the parent use subassemblies

• 1: Create a sub-assembly (Object)
  • var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }
• 2: declared within parent components, the root propertycomponents:{ 组件名:组件对象 }
• 3: Use the parent component to use in place of <组件名></组件名>
  • In a different frame, and some do not support capital letters, with time
    • Component name MyHeader
    • Use my-header
• Summary: Father, phonons, son hanging with child

(2) The registered global components

• Scenario: a multi-functional components used in common, can be registered as the overall assembly, to reduce redundant code
• Global API Vue.component('组件名',组件对象);

(3) Components depth

---

Sons pass component value (father to son)

• 1: When the parent sub-attributes by passing Prop
• 2: Sub To declare The props: [ 'attribute-name'] to receive
• 3: I receive is their own, and whatever you use
  • In the template directly with
  • In the js this. Attribute name with
• Summary: from father, son declared, it is the son of a
• Small added: constant transfer directly, colon variable transmission

Summary father to son

• Parent sub harbinger promoter, linked promoter, sub
• Father to son to son (attributes), sub-declaration (income), child directly (as is their) father

Parent child transmission

• 1. To bind native son events, events in the native functions through this $ emit ( 'self-defined event name', arg1); name of the event triggering the parent component of the neutron custom components.
• 2. The parent component sub-assemblies of v-bind:自定义事件的名字 = 'fn'binding custom events
• 3. The parent component function data can trigger the fn can pass from the sub-assembly come