Vue built-in component introduction

Built-in component

Dynamic components

• Dynamic components are suitable for processing where multiple components switch frequently.
• <component>Used to render a meta component as a dynamic component withisProperty values determine which component to render.

• The is setting content is the component name

  < div id = "app" > < component: is = "' ComA '" > < / component > / / dynamic component < / div >

  Used to quickly switch between multiple components, such as TAB effects.

  Var ComA = {template: '<div type="text"></div>'} var ComB = {template: '<div type="text"></div>'} var ComB = {template: '<div type="text"></div>'} '<div type="text"></div>'} var ComC = {template: '<div type="text"></div>'}

  new Vue({
  el:"#app",
  data:{
    titles:['ComA','ComB','ComC'],
    currentCom:'ComA'
  },
  components:{
    ComA,ComB,ComC
  }
  })

  <div id="app">
  <button 
    v-for= 'title in titles'
    :key='title'
    @click="currentCom = title"
  >
    {{title}}
  </button>
  <component :is="currentCom"></component>
  </div>

  

Is characteristic

• The is property creates a new instance of the component each time the component is switched. (Tab toggle destroys old components and creates new ones)

  • For example, add an input field to a child component, and then switch to find that it will not be preserved

Keep alive – components

• Mainly used to preserve component state or to avoid component renderings.
• Is an abstract component: It does not itself render a DOM element, nor does it appear in the parent component chain of the component

The problem

• Frequent switching back of dynamic components results in rerendering of components without preserving state

To solve

• Wrap with tags, do not re-render components, and preserve the internal state of components (cache)

• Is is bound to properties/computed properties. Not the way!

  <keep-alive>
  <component :is="currentCom" ></component>
  </keep-alive>

  Modify the TAB toggle above

  <div id="app">
  ...
  <keep-alive>
    <component :is="currentCom"></component>
  </keep-alive>
  </div>

attribute

The website address

• The include attribute is used to specify which components will be cached and can be set in a number of ways.

• If include is a property binding, you can set it as a string, array, or regular

  • include="ComA,ComB,ComC"Be careful not to add Spaces
  • :include="['ComA','ComB','ComC']"You can write an array directly, or you can put it in data.
  • :include="/Com[ABC]/"
• The exclude attribute does not contain

• The Max property, the maximum number of caches

  <keep-alive include="ComA,ComB,ComC">
  <component :is="currentCom"></component>
  </keep-alive>

  <keep-alive :include="['ComA','ComB','ComC']">
  <component :is="currentCom"></component>
  </keep-alive>

  <keep-alive :include="/Com[ABC]/">
  <component :is="currentCom"></component>
  </keep-alive>

Asynchronous components

• Vue allows you to define your component as a factory function that asynchronously parses your component definition.
• Vue fires the factory function only when the component needs to be rendered, and caches the results for future rerenders

The asynchronous component async-example passes the configuration template 1s later

Vue.component('async-example', function (resolve, Reject) {setTimeout(function () {// Resolve ({template: '<div>I am async! </div>' }) }, 1000) })

Asynchronous components are combined with Webpack code splitting

Vue.ponent ('async-webpack-example', function (resolve) {// This special 'require' syntax will tell Webpack // to automatically split your build code into multiple packages, These packages // load require(['./my-async-component'], resolve)} via Ajax requests.

ESM + ES6 + writing

Vue.ponent ('async-webpack-example'); // This dynamic import returns a 'Promise' object. () => import('./my-async-component') )

Locally register component writing

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

Factory functions that handle the load state

Const AsyncComponent = () => ({// The component to load (should be a 'Promise' object) Component: Import ('. / MyComponent. Vue '), / / asynchronous components used in load component loading: LoadingComponent, / / loading failure components used in the error: ErrorComponent, // shows the loading delay of the component. The default value is 200 (milliseconds) delay: 200, // If a timeout is provided and the component load also timeouts, // the component used when the load fails is used. Default is: 'Infinity' timeout: 3000})

• Learn the difference between asynchronous and synchronous components
• Implement encapsulation, passing in the components that need to be loaded

Access element components

In the vast majority of cases, it is best not to touch inside another component instance or manually manipulate DOM elements. But there are situations where it’s appropriate to do these things

Access the root component

• Within the child components of each new Vue instance, the root instance can be accessed with the $root property (child access).

  $root. Foo = 2 // This.$root. Foo = 2 // This.$root. Foo = 2 // This.$root.

• Note: this pattern does not extend to medium to large applications. Therefore, in the vast majority of cases, we strongly recommend itVuexTo manage the state of the application

  Access the parent component

• Use $parent. Dependency injection is recommended if the level is too deep

  var map = this.$parent.map || this.$parent.$parent.map

  ---

  Access subcomponent

• Despite the prop and events, sometimes you need to access a subcomponent directly in JavaScript. To do this, you can assign an ID reference to the child component via the ref attribute

  <base-input ref="usernameInput"></base-input>

  This. $refs. UsernameInput // Access the child component instance

• In the parent component, you can get the child component instance method and call the

  Function () {this.$refs.input.focus()}} function () {this.$refs.input.focus()}

  This. $refs.usernameInput.focus() // Called in the parent component

• Note: whenref 和 v-forWhen you use it together, you getrefWill be an array containing the subcomponents of the corresponding data source.

  Dependency injection

• use$parentProperty does not extend well to deeper nested components. This is where Dependency Injection comes in, with two new instance options:provide 和 inject

• Provide data/method issues for offspring components when applicable

  <a> <b> <c></c> // c></ b> </a>

  Solution: Provide and inject

The parent component

provide: function () {
  return {
    getMap: this.getMap
  }
}

Add the instance property getMap to any descendant component

inject: ['getMap']

• This usage gives us access in any descendant componentgetMap, without exposing the entire parent component instance
• In fact, you can think of dependency injection as a part of a “wide-range effective prop” (props for skipping generations).

Dependency Injection Disadvantages

• It couples the components in your application to the way they are currently organized, making refactoring more difficult
• The provided Property is non-reactive
• If you want to update the provided data in the ancestor component, then this means you may need to switch to a true state management solution like Vuex