Inter-component communication Vue--

Inter-component communication

Inter-component communication in three ways:

• props parent components pass data to subassembly
• $ Emit custom events (sub-components pass data to the parent component)
• slot slot distribute content

Communication between components should follow the following rules:

• Do not modify the data in the parent component is passed directly to subassembly
• Initialized data, uninitialized data should be used to see if a plurality of components, needs to be used if a plurality of components, the initialization within parent components; If only one component, it is initialized to be used in this assembly.
• In which component data initialization process (function) update data which should be defined in the assembly.

transmitting data to the sub-assembly props

1. Use props option to specify in the statement component object

the MyComponent = {const 
    Template: ` < div > </ div > `, 
    The props: where values are three ways, 
    Components: { 
    } 
}

Method 1: Specify transfer the property name, note the array.

props: ['id','name'，'salary', 'isPublished', 'commentIds', 'author', 'getEmp']

Second way: specified attribute name and data type delivery, note the object.

props: {
   id: Number,
   name: String,
   salary: Number,
   isPublished: Boolean,
   commentIds: Array,
   author: Object,
   getEmp: Function
}

Three ways: Specifies the attribute name, data type, necessity, the default value

props: {
   name: {
      type: String,
      required: true,
      default: 'zou'
    }
  ......
}

2. When reference component, dynamically assigned by v-bind

<my-component v-bind:id="2" :name="meng" :salary="9999" :is-published="true" :comment-ids="[1, 2]"
:author="{name: 'alan'}" :get-emp="getEmp" >
</my-component>

Let's look at the contents of the parent component

; ( Function () { 
    const Template = `<div class =" COL. 9-SM-SM-offset-COL COL. 3-COL-10-MD-2 MD-offset-main "> // by v-bind to the parent the transmitted content component subassembly: the name of the foregoing can be customized, variable names in order to facilitate understanding, the same general and delivery 
        <Dashboard: hobbies = "hobbies" @ delete_hobby = "deleteHobby"> </ Dashboard> 
      </ div> ` 
    window.AppHome = { 
        Template, // Template: Template, 
        Data () { // definition of the parent component subassembly to pass content in return { 
                hobbies: [ 'Coding', 'sleep', 'play Peas'' reading ' ], 
            } 
        }, 
        Components:{ //
        
   　　　　 




            
                

Dashboard, HomeList as a sub-assembly of AppHome 
            the Dashboard, // the Dashboard: the Dashboard 
            HomeList // HomeList: HomeList 
        } 
    } 
}) ()

Such parent component was written, take a look at the contents of sub-assemblies

; ( Function () { 
    const Template = `<div class =" Row placeholders "> // Use parent component subassembly pass over the data 
      <div V- for =" (Hobby, index) in hobbies ": Key = "index" class = "COL. 6-XS-SM-COL. 3-placeholder"> 
        <H4> Hobby {{}} </ H4>   
        <span class = "text-the muted"> 
          <A the href = "#" @click = "deleteHobby (index)"> delete </a> 
        </ span> 
      </ div> 
  </ div> ` 
    window.Dashboard = {
       // declaration attribute of the current parent component subassembly receiving transmitted 
        the props: [ 'hobbies' ] ,
        template // template: template    }
})()

    
    

        

The above methods use a traditional values, and then look at the way two way three

Parent component

; ( Function () { 
    const Template = `<div class =" COL. 9-SM-SM-offset-COL COL. 3-COL-10-MD-2 MD-offset-main "> 

        // To subassembly home-list in traditional values 
        <Home-List: empList = "empList": deleteEmp = "deleteEmp"> </ Home-List> 

      </ div> ` 
    window.AppHome = { 
        Template, // Template: Template, 
        Data () { // defines the parent component into subcomponents in the transfer of the contents of return { 
                empList: [ 
                    {ID: . 1, name: 'small. 1', the salary: '80001' }, 
                    {ID: 2, name: 'small 2', salary: '80002 '},
                    {id: 


            3, name: 'small. 3', the salary: '80003' }, 
                    {ID: . 4, name: 'small. 4', the salary: '80004' }, 
                    {ID: . 5, name: 'Small 5', salary: ' 80005 ' } 
                ] 
            } 
        }, 

        components: { // the Dashboard, as a sub-assembly AppHome HomeList of 
            the Dashboard, // the Dashboard: the Dashboard 
            HomeList // HomeList: HomeList 
        } 
    } 
}) ()

Subassemblies HomeList

;(function () {
    const template = `<div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>工资</th>
          <th>操作</th>
        </tr>
      </thead>
      < Tbody > 

          <-! There is also a subassembly Item -> 
        < Item V-for = "(EMP, index) in empList" : Key = "emp.id" : EMP = "EMP" : deleteEmp = " deleteEmp " : index =" index " /> 
      </ tbody > 
    </ Table > 
  </ div > ` 
    
    window.HomeList = { 
<-! declaration attribute of the current transmission sub-assembly of the receiving parent element -> 
     
        the props: { 
          empList: the Array, 
          deleteEmp: Function 
        }, 
        Template,
        components: { <!--Subassembly Item -> 
          Item 
        } 
    } 
}) ()

Subassemblies Item

; (function () { 
    const = `Template < TR > 
    < TD > {} {} emp.id </ TD > 
    < TD > {} {} emp.name </ TD > 
    < TD > {} {emp.salary } </ TD > 
  </ TR > ` 

  window.Item = { 
      The props: { 
        EMP: {// specified attribute name / type of data / must 
            type: Object, 
            required: to true 
        }, 
        deleteEmp: Function, 
        index: Number The 
      }, 

      Template 
  } 
}) ()