Between the traditional values vue project Sons assembly.

First, father and son talk about is the introduction of another component in a file vue vue file, the file is to be introduced vue sub-components, the introduction of vue vue document file is the parent component. In the parent component is not directly call the sub-components of variable values. The following detailed talk about, how to pass the value of the components between father and son.

Let me talk about the method to introduce the parent component sub-assemblies.

1, Routing Configuration: children property used for routing nested, nested assembly parent-child relationship is the relationship between the components

 {
      path: '/father',
      name: 'father',
      component: father,
      children: [
        {
          path: 'son',
          name: 'son',
          component: son
        }
      ] 
}

2, assembly traditional values ​​- values ​​to the parent component subassembly pass

The first step: in reference to a parent component sub-assembly, by binding property form (v-bind :) and the data to be passed to the sub-assembly, transmitted to the inner subassembly, the subassembly for use 

Parent component: father.vue

< Template > 
  < div > 
    < h1 of > parent element </ h1 of > 
    < Router-View V-the bind: fData = "DATAl" : fMessage = "DATA2" > </ Router-View > 
  </ div > 
</ Template > 
 
< Script > 
Export default { 
  data () { 
    return { 
      DATAl: ' parent element data DATAl ' , 
      DATA2: ' parent element data DATA2 ' ,
    };
  }
}
</script> 

Step two: the data transfer from the parent component, the definition of what the props array

1. All data props assembly, are transmitted to the parent sub-assembly by assembly

2.  Data props are read-only, and can not be reassigned

The third step: using props array data defined in the subassembly

Subcomponents: son.vue

<Template> 
  <div> 
    <h1 of> subassembly </ h1 of> 
    <P> The following is a data transmission over the parent component </ P> 
    <P> of the first data: fData {{}} </ P> 
    <P> second data: {} {} fMessage </ P> 
  </ div> 
</ Template> 
 
<Script> 
Export default { 
  The props: [ 'fData', 'fMessage'], 
  data () { 
    return { 
 
    }; 
  } 
} 
</ script>

3. The assembly of traditional values ​​- parent component subassembly to pass method

The first step: the parent component to child component delivery method, use the event binding mechanism v-on, a custom event property passed to the sub-assembly

Parent component: father.vue

< Template > 
  < div > 
    < h1 of > parent element </ h1 of > 
    < Router-View @show = "showFather" > </ Router-View > 
  </ div > 
</ Template > 
 
< Script > 
Export default { 
  Data () { 
    return { 
 
    }; 
  }, 
  methods: { 
    showFather (a, B) { 
      the console.log ( ' triggered parent element method '  +  ' ====== ' + a + '======' + b);
    }
  }
}
</script> 

Step two: define a method in the sub-assembly, in the method, using the $ emit trigger transfer from the parent component, to mount an event on the current instance, you can pass parameters

The third step: Call the method defined in the sub-assembly, you can trigger the method of the parent component is passed over the

Subcomponents: son.vue

<template>
  <div>
    <h1>子组件</h1>
    <Button type="primary" @click="sonClick">触发父组件方法</Button>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
 
    };
  },
  methods: {
    sonClick () {
      this.$emit('show', 111, 222);
    }
  }
}
</script> 

4, components by value - the value of sub-component calls to pass through the parent component event

In the subassembly, assembly using the method of the parent $ EMIT trigger the passed time, the data sub-assembly can be passed as parameters parent component

Parent component: father.vue

<template>
  <div>
    <h1>父组件</h1>
    <router-view @show="showFather"></router-view>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      fromSon1: '',
      fromSon2: ''
    };
  },
  methods: {
    showFather (a, b) {
      this.fromSon1 =A;
       the this .fromSon2 = B; 
      the console.log ( ' triggered parent element method '  +  ' ====== '  + A +  ' ====== '  + B); 
    } 
  } 
} 
</ Script > 

Subcomponents: son.vue

<template>
  <div>
    <h1>子组件</h1>
    <Button type="primary" @click="sonClick">触发父组件方法</Button>
  </div>
</template>
 
<script>
export default {
  props: ['fData', 'fMessage'],
  data () {
    return {
      sonMessage: 'Subassembly data sonMessage ' , 
      sonData: ' subassembly data sonData ' 
    }; 
  }, 
  Methods: { 
    sonClick () { 
      the this . $ EMIT ( ' Show ' , the this .sonMessage, the this .sonData); 
    } 
  } 
} 
</ Script > 

5, a value between each pass Sons assembly

Parent component: father.vue

<template>
  <div>
    <h1>父组件</h1>
    <Button type="primary" @click="getData">获取数据</Button>
    <router-view v-bind:fData="data1" :fMessage="data2" @show="showFather"></router-view>
  </div>
</template>
 
<script>
export default {
  data () {
    return { 
      DATAl: ' parent element data DATAl ' , 
      DATA2: ' parent element data DATA2 ' , 
      fromSon1: '' , 
      fromSon2: '' 
    }; 
  }, 
  Methods: { 
    showFather (A, B) { 
      the this .fromSon1 = A;
       the this .fromSon2 = B; 
      the console.log ( ' triggered method parent element '  +  ' ====== '  + a +  ' ====== '  + B); 
    },
    getData () {
      console.log(this.fromSon1);
      console.log(this.fromSon2);
    }
  }
}
</script> 

Subcomponents: son.vue

< Template > 
  < div > 
    < h1 of > subassembly </ h1 of > 
    < P > The following is a data transmission over the parent component </ P > 
    < P > of the first data: fData {{}} </ P > 
    < P > second data: {} {} fMessage </ P > 
    < the Button type = "Primary" @click = "sonClick" > parent element method triggers </ the Button > 
  </ div > 
</template>
 
<Script > 
Export default { 
  The props: [ ' fData ' , ' fMessage ' ], 
  Data () { 
    return { 
      sonMessage: ' subassembly data sonMessage ' , 
      sonData: ' subassembly data sonData ' 
    }; 
  }, 
  Methods: { 
    sonClick () { 
      the this $ EMIT (. ' Show ' , the this .sonMessage, the this .sonData); 
    } 
  } 
} 
</ Script >