Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to solve the problem of responsive monitoring of provide inject in vue". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope that this article "how to solve the problem of responsive monitoring of provide inject in vue" can help you solve the problem.

The Responsive Monitoring solution of provide inject

Tip: provide and inject bindings are not responsive. It was done on purpose. However, if you pass in a listenable object, the properties of the object are responsive.

So just pass the value to the object.

Provide () {return {provObj: {uuidList: {}

This._provided.provObj.uuidList = res (data obtained asynchronously)

Inject gets it normally.

Vue snooping assignment and provide and inject

Vue when the parent component changes the props of the child component remains the same

Watch: {'oState': function (val,oldval) {this.getOrderList ({orderStatus: this.getOrderState (this.oState), pageSize: 1})}, / / depth watcher c: {handler: function (val, oldVal) {/ *... * /}, deep: true},}

$refs

ScrollToTop () {this.$refs.commentList.scrollTop = 0}

$el

This.$refs.studentListDialog.$el.querySelector ('.el-dialog') vm.$once (event, callback)

Parameters:

{string} event

{Function} callback

Usage:

Listens for a custom event, but only fires once, and removes the listener after the first trigger.

Vm.$off ([event, callback])

Parameters:

{string | Array} event (arrays are only supported in 2.2.2 +)

{Function} [callback]

Usage:

Remove custom event listeners.

If no parameters are provided, remove all event listeners

If only the event is provided, remove all listeners for that event

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

Vm.$destroy ()

Usage:

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

The hook that triggers beforeDestroy and destroyed.

When a vue instance is generated, when the data is assigned again, sometimes it is not automatically updated to the view

Obj: {arr: []}

Obj.arr cannot be changed directly after two-way binding

You need to add a new arr assignment or

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

Parameters:

{object | Array} target

{string | number} key

{any} value

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

When the set method is called, all pages can be triggered to re-render.

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

This pair of options need to be used together to allow an ancestral component to inject a dependency into all its descendants, no matter how deep the component level is, and will remain in effect for as long as the upstream and downstream relationship is established. If you are familiar with React, this is very similar to the contextual feature of React.

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. You can use ES2015 Symbols as key in this object, but it only works in environments that natively support Symbol and Reflect.ownKeys.

The inject option should be:

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

Search for the key (string or Symbol) used in the available injection, or an object whose:

The from property is the key (string or Symbol) used to search for injection content available.

The default property is the value used in the degraded case

Tip: provide and inject bindings are not responsive. It was done on purpose. However, if you pass in a listenable object, the properties of the object are responsive.

Example:

/ / parent component provides' foo' var Provider = {provide: {foo: 'bar'}, / /...} / / subcomponent injection' foo' var Child = {inject: ['foo'] Created () {console.log (this.foo) / / = > "bar"} / /.} on "how to solve the problem of provide inject responsive snooping in vue" is introduced here. Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.