Responsive listening solution for providing inject in vue

Responsive listening solution for provide inject

Tip: Provide and inject binding are not responsive. This is done deliberately. However, if you pass in an listenable object, then its object's properties are still responsive.

So you can pass the value and object

provide(){
    return {
      provObj: {
        uuidList:{}
      }
    }
  },

• this._provided. = res(asynchronously obtained data)
• Inject is normally obtained

vue listening assignment, provide and inject

vue When the parent component changes the props of the child component but remains unchanged

  watch: {
    'oState': function (val,oldval) {
      ({orderStatus: (), pageSize: 1})
    },
  // Depth watcher      c: {
        handler: function (val, oldVal) { /* ... */ },
        deep: true
      },
  },

• $refs

  <ul class="comment-list" v-if="list" ref="commentList"></ul>
  scrollToTop () {
    this.$ = 0
  }

• $el

  this.$.$('.el-dialog')
  vm.$once( event, callback )

parameter:

{string} event

{Function} callback

usage:

Listen to a custom event, but triggers only once, removing the listener after the first trigger.

vm.$off( [event, callback] )

parameter:

• {string | Array<string>} event (only supports arrays in 2.2.2+)
• {Function} [callback]

usage:

• Remove the custom event listener.
• If no parameters are provided, all event listeners are removed;
• If only events are provided, all listeners for that event are removed;
• If both events and callbacks are provided, only the listener for this callback is removed.

vm.$destroy()

usage:

Completely destroy an instance. Clean up its connection with other instances and unbind all its instructions and event listeners.

Triggers the hook beforeDestroy and destroyed.

After generating a vue instance, when the data is assigned again, it is sometimes not automatically updated to the view.

  obj:{
      arr:[]
  }

It cannot be changed directly after two-way binding

Need to add an arr assignment or

  this.$set(, 'date', time)
  (target,key,value)

parameter:

{object | Array} target

{string | number} key

{any} value

This.$set() is the same as the essential method of (). The former can be used in methods.

When the set method is called, all pages can be re-rendered.

provide：Object | () => Objectinject：Array<string> | { [key: string]: string | Symbol | Object }

This pair of options needs to be used together to allow an ancestor component to inject a dependency into all its descendants, regardless of the depth of the component hierarchy and always take effect during the time when the upstream and downstream relationship is established. If you are familiar with React, this is very similar to React's contextual features.

The provide option should be an object or a function that returns an object. This object contains properties that can be injected into its descendants. In this object you can use ES2015 Symbols as key, but it only works in environments where Symbol and .

The inject option should be:

An array of strings, or an object, the key of the object is the local binding name, and the value is:

Search for key (string or Symbol) in available injection content, or an object that:

• fromProperties are keys (strings or Symbols) for searching for available injection content
• defaultThe attribute is a value used in a downgrade situation

Tip: Provide and inject binding are not responsive. This is done deliberately. However, if you pass in an listenable object, then its object's properties are still responsive.

Example:

// Parent component provides 'foo'  var Provider = {
    provide: {
      foo: 'bar'
    },
    // ...
  }
// Subcomponent injection 'foo'  var Child = {
    inject: ['foo'],
    created () {
      () // => "bar"
    }
    // ...
  }

The above is personal experience. I hope you can give you a reference and I hope you can support me more.