1.Vue.set

Dynamically add responsive data

Vue.set(target, propertyName/index, value)

Equivalent to vm.$set/this.$set

Vue.set(c, 'price', 100);
Vue.set(array, 1, obj);
Copy the code

2.Vue.delete

Dynamically delete reactive data

  • Vue.delete(target, propertyName/index, value)

  • If delete obj[propertyName] is used directly, the triggered reactive data will not be modified

  • Equivalent to vm.$delete/this.$delete

      Vue.delete(c, 'price');
Copy the code

3.vm.$on

Listen for custom events on the current instance. Events can be emitted by vm.$emit. The callback function receives any additional arguments that are passed in to the event that triggers the function.

Prototype: $bus = new Vue(); prototype: $bus = new Vue();

All child pages listen for their own closed events, distributed by the parent page.

// Use child components in the parent page
<message  @myFunc="myCallback"> equivalent to message instance.$on("myFunc",myCallback)
//myCallback is the method of the current parent class
Copy the code
  • $on 和 $emitMessage is sent and received by the same child component,
  • Call this.$emit(‘myFunc’)// from the message method component to emit the event
  • The corresponding myCallback is executed

Usage scenario: One parent page notifies multiple child pages to close related operations at the same time

4.vm.$once

Listen for a custom event, but only once. Once triggered, the listener is removed.

5.vm.$off

  • Remove custom event listeners.

  • If no arguments are provided, all event listeners are removed;

  • If only events are provided, remove all listeners for that event;

  • If both an event and a callback are provided, only the listener for that callback is removed.

    $off('test', callback) $off('test', callback) $off('test', callbackCopy the code

6. Ref and this. $refs

Ref is used to register reference information for an element or child component. The reference information will be registered with the parent component’s $refs object. If used on a normal DOM element, the reference refers to the DOM element. If used on a child component, the reference refers to the component

<input type="text". ref="inp"> mounted(){ // mounted To access inP
this.$refs.inp.focus() }
Copy the code
  • Refs are created as render results and cannot be accessed during the initial render
  • $refs is not reactive, do not attempt to use it for data binding in templates
  • When v-for is used for elements or components, the reference information will be an array containing DOM nodes or component instances.