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

Today, I would like to share with you the relevant knowledge points about how to achieve responsive data update in provide/inject in Vue.js. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

First of all, suppose we passed in dynamic data in our ancestors, didn't the official say that if you passed in a listenable object, then its object is still responsive?

Parent parent page:

Export default {provide () {return {foo: this.fonnB}}, data () {return {fonnB: 'old word'}} created () {setTimeout () = > {this.fonnB = 'new words'; / / here only foonB has changed, foo has not changed this._provided.foo= "new words"; / / here foo has changed, but the foo obtained by the subcomponent is still old words console.log (this._provided) }, 1000),}

Child subpages:

Export default {inject: ['foo'], data () {return {chilrfoo: this.foo}}, created () {setTimeout (() = > {/ / the foo obtained by the subcomponent is still old words console.log (this.foo)}, 2000)}}

Results:

Through the above method, after verification, the sub-component page has no way to update the value of this.foo in response. Maybe we still have a wrong understanding of the officials. the following is a responsive data update through online materials and our own ideas.

Example (the result is still not feasible)

Obviously, in the parent component timer, we changed the data source. At this time, we were wondering whether the data we changed had been passed into the descendant component. To verify this problem, we might as well manually write the set function in the descendant component. Computed itself is only equivalent to a get function. Of course, you can also try watch.

Parent parent page:

Export default {provide () {return {foo: this.fonnB}}, data () {return {fonnB: 'old word'}} created () {setTimeout () = > {this.fonnB = "new words"; / / the foo has changed here, but the foo obtained by the subcomponent is still old words}, 1000)},}

Child subpages:

Export default {inject: ['foo'], data () {return {childfooOld: this.foo}}, computed: {chilrdfoo () {return this.foo}}, created () {console.log (this.foo) / /->' old word' setTimeout (() = > {console.log (this.chilrdfoo); / / the calculation attribute here is still old words}, 2000);}}

Through computed, we all know that there is get/set in data, and the data is responsive, but why it is not updated is a little confused. If there is a boss who can explain it clearly, you can discuss it.

But, but, but! The actual requirements are certainly not that simple, often what we need is to share dynamic data in the parent component, which may come from data or store. That is, after the data in the parent component changes, it needs to be synchronized to the descendant component. What should I do at this time?

I want to assign a function to a value of provide, which returns the dynamic data of the parent component, and then calls the function in the descendant component.

In fact, this function stores a reference to the parent component instance, so each child component can get the latest data. The code looks like this:

Parent components:

The Parent component changes the value of name in the name Parent component: {{name}}. Parent-container {padding: 30px; border: 1px solid burlywood } import Child from'. / Child'export default {name: 'Parent', data () {return {name:' Kevin'}}, methods: {changeName (val) {this.name = 'Kev'}}, provide: function () {return {nameFromParent: this.name, getReaciveNameFromParent: () = > this.name}, / / provide: {/ / nameFromParent: this.name, / / getReaciveNameFromParent: () = > this.name / /} Components: {Child}}

Child component

Child component. Child-container {padding: 30px; border: 1px solid burlywood;} import GrandSon from'. / GrandSon'export default {components: {GrandSon}}

GrandSon components:

Grandson component {{nameFromParent}} {{reactiveNameFromParent}}. Grandson-container {padding: 30px; border: 1px solid burlywood } export default {inject: ['nameFromParent',' getReaciveNameFromParent'], computed: {reactiveNameFromParent () {return this.getReaciveNameFromParent ()}}, watch: {'reactiveNameFromParent': function (val) {console.log (' name value from Parent component has changed', val)}}, mounted () {console.log (this.nameFromParent) 'nameFromParent')}} these are all the contents of the article "how to implement responsive data updates in provide/inject in Vue.js" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.