14 kinds of components of communication
1. props
This property is father to son, props value can be an array or object
// Array: not recommended The props: [] // Object The props: { inpVal: { type: Number The, // incoming values defined type // type value may String, Number, Boolean, Array, Object, Date, Function , the Symbol // type constructors can also be a custom, and be checked by instanceof acknowledgment required: to true , // whether the transmission will default : 200 is , // default value, or an array of objects from a default value of the function must be factory Get as default: () => [] Validator: (value) { // this value must match the string following a return [ ' Success ' , ' warning ' , 'danger'].indexOf(value) !== -1 } } }
2. $emit
This is also very common, trigger custom event of the parent component, in fact, from father to son method
1 // parent component 2 <Home @ title = "title"> . 3 // subassembly . 4 the this $ EMIT ( 'title', [{title: 'This is a title'}]).
3. vuex
vuex is a state manager,
A separate plug-ins for sharing more data items inside, because if just simple communication, it would be more heavy use
. 1 State:. Definitions stored data warehouse, may be accessed by $ store.state or mapState the this 2 getters: Get value store, the attribute store can be considered to calculate, or can be obtained by this $ store.getter. MapGetters access . 4 mutation: synchronous change store value, why is it designed to synchronize, because mutation is a direct change store value, 5 VUE operation will be recorded, if it is asynchronous unable to track the change by mapMutations call. 6 Action: asynchronous call function performs mutation, thereby changing the store value, by the this . $ mapActions dispatch or access . 8 modules: module, if the state too, can be split into modules, and finally introduced through the inlet ... deconstruction
4. $ attrs and $ listeners
2.4.0 The two new properties are not common, but advanced usage is very common;
$ Attrs scenario: If the father to son have a lot of value, then you need to define a plurality of sub-assemblies
props to solve: attrs get the props value is not defined in the parent child transmission ($ attrs in which there will only be props not registered property) -> (except for class and style)
1 // parent component 2 <Home title = "This is the title" width = "80" height = "80" for imgUrl = "for imgUrl" /> . 3 . 4 // subassembly . 5 Mounted () { . 6 the console.log ( the this . attrs $) // {title: "this is the title", width: "80", height: "80", for imgUrl: "for imgUrl"} . 7 },
. 1 props: { 2 width: { // parent element width after registration subassembly props, then fail to attrs on $ . 3 type: String, . 4 default : '' . 5 } . 6 }, . 7 Mounted () { . 8 the console.log ( the this . $ attrs) // {title: "this is the title", height: "80", for imgUrl: "for imgUrl"} . 9 },
$ In the Listeners scene: sub-component needs to call the parent component of the solution : Method parent component of the internal components can pass through the v-on = "listeners" ----- very useful when creating a higher level of component
1 // parent component 2 <Home change @ = "change" /> . 3 . 4 // subassembly . 5 Mounted () { . 6 the console.log ( the this . $ The Listeners) // to get change event 7 }
$inheritAttrs
Within the component is not registered property will be rendered as an ordinary html element attributes
1 // parent component 2 <Home title = "This is the title" width = "80" height = "80" for imgUrl = "for imgUrl" /> . 3 . 4 // subassembly . 5 Mounted () { . 6 the console.log ( the this . attrs $) // {title: "this is the title", width: "80", height: "80", for imgUrl: "for imgUrl"} . 7 }, . 8 . 9 inheritAttrs default value to true , i.e. on the properties of the parent component will be displayed on the root component 10 If set to false will hide
5. provide 和 inject
2.2.0 version of the new
Usage scenarios: to allow the injection of an ancestor to all future generations a component dependent on, no matter how deep the component level, and since the establishment of the relationship between the upstream and downstream is always time to take effect.
provide: an object or an object function returns
inject: a string array, or an object, key object is the local name binding
. 1 <Template> // parent element 2 <div ID = "App"> . 3 </ div> . 4 </ Template> . 5 <Script> . 6 Export default { . 7 Data () { . 8 return { . 9 DATAS: [ 10 { . 11 ID:. 1 , 12 is label: 'products' 13 }, 14 { 15 ID:. 1 , 16 label: 'Products 2' . 17 }, 18 is { . 19 ID:. 1 , 20 is label: 'three products' 21 is } 22 is ] 23 is } 24 }, 25 Provide { 26 is return { 27 DATAS: the this .datas 28 } 29 } 30 } 31 </script>
<template> // 后代组件 <div> <ul> <li v-for="(item, index) in datas" :key="index"> {{ item.label }} </li> </ul> </div> </template> <script> export default { inject: ['datas'] } </script>
Note: provide and inject bindings can not respond. This is deliberate. However, if you pass a listener object, then the object or its properties can respond.
Responsive Example:
Parent components provided Provide () { return { map_nodeObj: {map_node: the this .OBJ} // Tip: provide and can not inject binding response. This is deliberate. However, if you pass an object that can monitor, then the object or its properties can respond. } }, Subassembly introduced Inject: { map_nodeObj: { default : () => { return {map_node: '0' } } } }, using: the this .map_nodeObj.map_node // Run Sequence Data Provide Created // In this $ EL phase has not been generated, processing logic in this first privide, the children of the components can take only the values inject Mounted ...
6. $parent 和 $children
$ Parent: refer to parent component, returns a collection of components
Usage:. This $ parent (if the current component has no parent component, then return to the current component)
$ Children: generation means subassembly, returns a collection of components
Usage:. This $ children (if you can clearly know the order of sub-assemblies can be used to represent the subscript)
Note: (1) components can have only one root
(2) may be used in the subassembly this. $ Parent. Attribute value, or function
(3) may be used within parent components this. $ Children [i]. Property
(4) Note that this point
7. ref and $ refs
There are three usage ref:
(1) ref applied to common elements, acquired with this. $ Refs.name dom element is
(2) ref applied to the subassembly,. $ Refs.name acquired by this component instance, be used all the methods
Ref and v-for the case together
8. $root
$ Root global properties
App = the let new new Vue ({ EL: '#app' , // global data, or the formation of other pages may be changed Data: function () { return { S: '' } }, Router, Store, Template: '<Router -view> </ Router-View> ' }) // a.vue the this . root.s = $' s attribute set ' // b.vue the console.log ( the this . $ root.s) // set s property
9. .sync
2.3.0 .sync modifier from reintroduced, as syntactic sugar .sync is a compile-time, it will be extended to automatically update a parent component attribute v-on Listener
// parent element <CoMP: foo.sync = "bar"> </ CoMP> // will be extended to compile time: <CoMP: foo = "bar" @Update: foo = "Val => bar = Val"> </ CoMP> // subassembly // when sub-assembly needed to update the value of foo, which need to explicitly trigger an update event: // so update trigger subassembly can be varied by methods EMIT $ the this $ EMIT ( 'update. : foo ', newValue)
10. v-slot socket
2.6.0 New
(1) anonymous slot
(2) named slots
(3) Scope slot