Talking about the difference between writing vue props and not writing default

  • 2021-08-06 20:12:42
  • OfStack

Note that default is not written as defaults

For example, there is a component named mk-test as follows:


<template>
  <div>{{maxLength}}</div>
</template>
<script>
export default {
  props: {
    maxLength: {
      type: Number,
      default: 1
    }
  }
}
</script>

When the parent component calls this:

< mk-test > < /mk-test >

The rendering is:

1

If the default: 1 of the component is deleted, the calling mode of the parent component remains unchanged, and the rendering result is:

0

At this time, if the parent component is changed to:

< mk-test maxLength="3" > < /mk-test >

The rendering result is:

3

Self-summary:

1. When using default to define the default value, if the parent component has a value, it will be rendered with the parent value. If the parent component does not pass a value, the default value is used.

2. When no default value is defined, if the parent component has a value, it will be rendered with the parent value. If the parent component does not pass a value, the default value of that type is used. Type and its default values are as follows:

String ''

Number 0

Array []

Object {}

Additional knowledge: new Vue () and export default {} in Vue. js

new Vue () and export default {} are often located in different files when generating, exporting, importing and using Vue components.

First of all, what is Vue? The main understanding of po is that Vue is a constructor, and the generated instance is a huge object, which can contain data, templates, mount elements, methods, life cycle hooks and other options.

Therefore, when rendering, you can use the method of constructing Vue instance to render the corresponding html page:


new Vue({
  el: '#app'
  ...
})

So export default {} again?

Used when reusing components.

Suppose we write a single-page component A file and need it in another file B, then we should use the import/export syntax of ES6, define the output interface export ** in the file A, introduce import ** in the file B, and then generate an Vue instance new Vue (**), and use the introduced components, so that we can reuse the component A to cooperate with the file B to generate html pages.

Therefore, when reusing components, export and new Vue are missing 1.


Related articles: