The last chapter records how pass value to sub-components in the parent assembly, but in practical applications, often sub-components have to pass data to the parent component, then how should we do it this time
1. v-on event listener subassembly within parent components, and data transfer using EMIT $ subassembly
// parent component <template> <div id="home"> <Com test = '12345' test2 = '1213232111111' @ a_even = "a_even"> </ com> // use v-on event listener subcomponent @ is v-on Acronym </div> </template> <script> import com from "../components/a_component"; export default { name: "home", components: { with }, methods: { a_even(e){ the console.log ( 'the even' , e) // value of e, it is within the sub-assembly, the event event parameters a_even } } }; </script>
// subassembly <template> <div class="a_component-wrap"> <h1> {{? 1}} </h1> <input v-model="a1"/> </div> </template> <script> export default { name: "AComponent", data(){ return{ a1: '123' } }, watch:{ a1 () { // trigger a_even custom event a1 when the value changes, and as the event parameter this.al the let VM = the this ; vm.$emit('a_even',vm.a1) } } }; </script>
2. In the vue, all methods defined in this methods, the current point component instance, can use this feature, a pass band in reference props Method
// parent component <template> <div id="home"> <Com: base_f = "base_f"> </ com> // speaking base_f as props parameter passed to the subassembly </div> </template> <script> import com from "../components/a_component"; export default { name: "home", components: { with }, methods: { base_f (the Option) { // methods defined in the methods, no matter where the call point to this, when the column are real definition, it is because the method defined methods, will bind js method of () sense interested students can search on their own, once again not to say console.log (option) // print is a sub-component calls base_f parameters passed
console.log (this) // print is an instance of the parent component of the current
} } }; </script>
<template> <div class="a_component-wrap"> <h1> {{? 1}} </h1> <input v-model="a1"/> </div> </template> <script> export default { name: "AComponent", props:{ base_f:{ type: Function, // define received props } }, data(){ return{ a1:"" } }, watch:{ ? 1 () { VM the let = the this ; the this .base_f (vm.a1); // subassembly using the passed base_f method and pass parameters a1 subassembly } } }; </script>
This method involves js closures, and this point to understand the reason for not deep involvement in the children's shoes quite js income. But usually the actual use or recommend the first method, it is worth mentioning yes. If the value in this transmission method, you change the parent component base_f state, it is unlikely to cause a given vue
Between the traditional values assembly 3 Brothers
Which is a value between brother pass component, which is obtained by the above method may also be implemented in combination, first pass the value of a sub-assembly a parent component and then pass the value to the parent component b components.
But this was too much trouble, all this time, if we can manage to have a common state loader is very necessary, yes this is vuex