Vue2.4 + New Attribute. Sync, $ Attrs, $ Listener’s specific use


Before Vue2.4, the parent component transmits the value to the sub-component value, and the sub-component cannot directly change the value of the parent component, it needs to pass $ EMIT triggers custom events to inform the parent component to change the value. It is more cumbersome, and the Writing is as follows:

// Parent component

The value of the parent component is transmitted to the subcaps: {{name}}
   

Import Child from './child'Export default {company: {child}, data () {RETURN {Name: 'Linda'}}, methods: {modify (newval) {this.name = newval}}} // subcomponent input box:
// Parent Component
The value of the parent component is transmitted in subcaps: {{name}}

Import Child from ‘./child’Export default {Components: {child}, data () {return {name: ‘linda’}}}
 // subcomponent   input box: 

Export Default {Props: A part is simplified on the method, and it is clear that the parent component does not need to define the method detection value. In fact, an abbreviation for the previous $ EMIT method,. Sync is actually a UPDATE: VAL method to be listened to the parent component to listen to the event of the subcomponent modified value.
PrOPS: ['Type', 'PlaceHolder', 'Title', ...]
“Is it ugly? $ Attrs is born in order to solve this problem, this property allows you to use the native HTML element when using custom components. For example:
// Parent component

MY-INPUT is used like the original INPUT Same. And MyInput did not set up PrOPs, as shown in

input box:
  
Export Default {Inheritattrs: false, computed: {value: this. $ Vnode.data.model.value, … this. $ Attrs}}}}

Basic literacy
  V-model is a short written by V-bind: value and V-ON: INPUT, so you are complete in the parent component You can write directly: value = "name", @ infut = "val => name = val". Viewing document   
Instructions in the official API of Vue to $ Attrs


$ Attrs contains the parent’s role Not as a characteristic binding (Class and Style)

relatively confused is to set the child components: value = “name” is equivalent to set PrOPS: [‘ Value ‘], so you don’t get Value from $ Attrs in MyInput, you need to re-woine $ Attrsall, add the value property. So the sub-assembly also has the following writing, I prefer this way of writing because it is more elegant
   
input box:
Export Default {Inheritattrs: false, props: ['value']}
$ LiSTENER

Like the above $ Attrs property, this property is also generated in order to use native events in custom components. For example, if you want to implement the FOCUS event in front of the Myinput component, it is useless to write, it is useless


The FOCUS event must be made on the input element of the MyInput component, and the final Myinput source code is as follows:

 input box:   
This article is introduced to this with the specific use of Vue2.4 + new attributes. Sync, $ Attrs, $ Listeners. Multiple Related Vue2.4. Sync, $ Attrs, $ listener content, please search for Tumi clouds or continue to browse the following related articles I hope everyone will support Tumi.cloud!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment