Detailed explanation of some new features in VUE high release

First, the depth effect selector (>>>) Strictly, this should be the functionality of Vue-Loader. “Vue-loader”: “^ 12.2.0”

In project development, if the business is more complicated, it is unavoidable to the third-party components like the MTR or B-terminal function page. Library, products sometimes want to customize these components. If these components use the CSS with a scope, the parent component wants to customize the style of the third party component.

Depth Effect Selector (>>> Operation) can help you.

If you want a selector in the ScopeD style, you can use “deeper”, such as influencing sub-components, you can use> >> Operation
Export Default {Name: ‘Child’, DATA () {Return {}}}
   .child-title {font-size : 12px;} 

In the top of the CHILD component. The scope of the CSS setting font size is 12px, and now I want to customize it in the parent component. Size 20px, color is red.
Import Child from ‘./child’ ;Export Default {Name: ‘Parent’, Components: {Child}, Data () {RetURN {}}}
.parent-custom >>> .child-title {font-size: 20px; color: red;}

is properly effective. But don’t be happy too early, notice that the STYLE uses the pure CSS syntax, if you use the Less syntax, you may receive a webpack error message.

.parent-custom {>>> .child-title {font-size: 20px; color: red;}}
Error IN ./~/css-loader/lib/style-compiler? {"vue":true ,"id":"data-v-960c5412", "scoped ": false," HasinlineConfig ": false}! ./ ~ / postcss-loader! ./ ~ / less-loader! ./ ~ / vue-loader / lib / selector.js? type = styles & index = 0! ./ src /components/parent.vuemodule build file: unrecognized infut @ /Src/components/parent.Vue (line 22, column 6) Near lines: .parent-custom {>>> .child-title {font-size: 20px; The above error information is actually the LESS syntax does not know >>>. (someone in github issuProposal support >>> Operators, but the V2.7.3 used herein will have this problem) Solution is the use of the SCAPING and variable interpolation (variable interpolation)
@deep: ~ ‘>>>’ ;. Parent-Custom {@ {deEP} .child-title {font-size: 20px; color: red;}}
For other CSS prefrogens, because there is nothing, don’t add comments, let the documentation.
  Some preparations like SASS cannot be parsed correctly >>>. In this case you can use the / deep / operator - this is a >>> alias, which can also work properly.  
Second, Component Configuration Item Inheritattrs, Component Instance Properties $ Attrs and $ Listeners

2.4.0 Add

Component Configuration Item Inheritattrs
   We all know that the three prop of A, B, C, while the subcaps' PrOPS options are only declared by A and B Then, the rendering C will appear as an HTML custom attribute on the root element of the sub-component.   If you do not want this, you can set the configuration item of the sub-assembly inheritattrs: false, the root element will be clean. 
Export Default {name: ‘Child’, Props: [‘A’, ‘B’], Inheritattrs: false}

Component Instance Properties $ Attrs and $ Listener

What is the VM. $ AtTRS documentation?

VM . $ attrs

{[key: string]: String}

Read only
 Contains a characteristic binding (except for Class and Style) in the parent-based domain (except Class and Style). When a component does not declare any PROP, here will contain all the parent's bindings (except Class and Style), and can be incomplated into internal components through V-bind = "$ attrs" - when creating high-level components very useful.    Incident is two points:  
VM. ATTRS is the built-in attribute of the component, and the value is not included in all PROPs incorporated by the parent component. The declared Prop (except Class and Style).

// Parent.Vue

// Child.Vue Export Default {name: ‘Child’, Props: [‘A’, ‘B’], Inheritattrs: false, mounted () {// console output: // CHILD: $ Attrs : {C: “C”} console.log (‘CHILD: $ Attrs:’, this. $ attrs);}}

The component can further pass the value to its subcomponents by using V-bind = “$ attrs” on its own subcomponents. That is, the subcomponents will use the value of the $ atTRS as the incoming PROP, and also comply with the first point of rules.

// Parent.Vue

// CHild.Vue

Export Default {name: ‘child’, Props: [‘a’, ‘b’], inheritattrs: false}
// grandchild.vue Export Default {name: ‘grandchild’, Props: [], // props: [‘c’], inheritattrs: false, mounted () {// console output: // grandchild: $ attrs: {D: “D “, C:” C “} console.log (‘Grandchild: $ Attrs:’, this. $ attrs); // If PROPS: [‘c’] // Console Output: // GrandChild: $ attrs: { D: “D”}},}
  VM. $ Listeners  
Type: { Key: String]: Function | Array}
contains (excluding .native modifiers) V-ON event listeners in the parent's domain. it canPassing Internal Components through V-ON = "$ listener" - very useful when creating a higher level component.
Incident is also two points:

1, VM. $ Listener is the built-in attribute of the component, its value is the parent component (excluding .native V-ON event listener of the modifier.
2, components can be passed to their child components by using V-ON = “$ listeners” on their subcomponents. If the subcomponent has binds the listener of the same name in $ listener, the two listener functions will be executed in the way.
 // Parent.Vue   
Export Default {name: 'Parent', Components: {child}, methods: {onparentUpdate () {console.log ('parent.vue: onparentupdate')}}} // child.Vue
EXPORT DEFAULT {Name: 'Child', Components: {Grandchild}: {Console.log ('child.Vue: onchildupdate')}}}}}}}}}}}}}} .VUE Export Default {name: 'Grandchild', MOUNTED () {// Console Output: // Grandchild: $ listener: {Update: ƒ} console.log ('Grandchild: $ listener:', this. $ listener); // Console output: // child. vue:. onChildUpdate //parent.vue:onParentUpdate this $ listeners.update ();}}
Third, the component options provide / inject

2.2.0 add

If the communication method between the components exemplified Vue, usually through said prop, custom event, the event bus, as well as Vuex. Provide / Inject provides another method.

This requires the option to be used together to allow a ancestor component to inject a dependence to all of its future generations, regardless of the length of the component hierarchy, and will always take effect in the time of the upstream relationship.

If you are familiar with React, this is similar to the context of React.

However, it is important to note that it is not recommended to use it directly in the application in the document.

Provide and INJECT are mainly used for high-order plug-in / component libraries. It is not recommended to use it directly in the application code. // Parent.Vue

Export Default {name: ‘Parent’, Provide: {data: ‘I am ParenT.Vue ‘}, Components: {child}}
// child.Vue
   Export default {name:' child ', Components: {grandchild}} 
// grandchild.Vue export default {name: 'grandchild', INJECT: ['DATA'], MOUNTED () {// Console Output: // GrandChild: Inject: I am parent.vue console.log ('grandchild: inject:',;}}
The Provide option should be an object or return one The function of the object. This object contains properties that can be injected into their descendants. The INJECT option should be a string array or an object, which represents the name of the local binding, and Value is the key to the value of Value. When 2.5.0+ is an object when the INJECT option is an object, you can specify from WOM to indicate source properties, and default specifies the default value (if it is the right to use a factory method).
const leild = {INJECT: {foo: {from: 'bar', default: 'foo' // default: () => [1, 2, 3 ]}}}
Fourth, the scope slotSlot-Scope 2.1.0 Added
At 2.5.0 +, Slot-Scope is no longer limited to use on the template element, You can use any elements or components within the slot.

The document description of the scope slot is very detailed. Let’s take an example to show the application scenario.

You can see that the list page and editing page are the same for data display, and the only difference is that there are different processing logic for data on different pages. The same data shows that this piece can be extracted into one component, and the different places can be implemented by means of scope slots.

// Data-Show.Vue


// List.Vue

 X   // edit.Vue 
View Modified
5. Error capture of Vue
Global Configure ErrorHandler from 2.2. 0, this hook also captures errors in the component lifecycle hook. From 2.4.0 this hook will also capture VUECustom Event Processing The internal error is over.
More detailed descriptions You can view the document Errorhandler

Lifecycle hook errorcaptured

2.5.0+ new
More detailed descriptions You can view document errorcaptured
  If you are familiar with React, it will find that it is very similar to the concept of error bordaries, which is actually true.  
In document Error Handling with ErrorCaptured Hook, a typical example

Vue.component (‘ErrorBoundary’, {DATA: ) => ({Error: null}), errorcaptured (err, vm, info) {this.error = `$ {err.stack} \ n \ nfound in $ {info} of component` Return False}, Render (h ) {if (this.Error) {Return h (‘pre’, {style: {color: ‘red’}}, this.error)} // ignoring Edge Cases for the Sake of Demonstration Return this. $ SLOTS.DEFAULT [0]}})

Need to emphasize ERRORCAPTURED does not capture itself and asynchronous errors (such as network requests, mouse events Equal to generate errors).

In 2.5 we introduce the new errorCaptured hook. A component with this hook captures all errors (excluding those fired in async callbacks) from its child component tree (excluding itself).

Reference Vue高版本中一些新特性的使用详解
    The above is the use of some new features in the VUE high version of Xiaobian, I hope to help everyone. If you have any questions, please leave a message, Xiaobian will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment