前言：
而今朋友们对“clist数组”都比较看重，咱们都想要了解一些“clist数组”的相关内容。那么小编也在网摘上网罗了一些有关“clist数组””的相关知识，希望同学们能喜欢，同学们快快来学习一下吧！provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
一、简单示例
向子组件注入数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>provide / inject</title> <script src=";></script></head><body> <div id="js_app"> <children></children> </div> <script> var Children = { inject: ['list'], template: '<ul><li v-for="(v,i) in list" :key="i">姓名：{{ v.name }} 分数：{{ v.score }}</li></ul>' }; var app = new Vue({ el: '#js_app', provide: { list: [ { name: 'tom', score: 88 }, { name: 'jack', score: 75 }, { name: 'rose', score: 96 } ] }, components: { children: Children } }); </script></body></html>二、配合Symbol使用var symbol = Symbol();var Children = { inject: { // 这里是一个对象，自定义key指定值 list: symbol }, template: '<ul><li v-for="(v,i) in list" :key="i">姓名：{{ v.name }} 分数：{{ v.score }}</li></ul>'};var app = new Vue({ el: '#js_app', provide: function() { // 这里是一个函数，返回一个对象 return { [symbol]: [ { name: 'tom', score: 88 }, { name: 'jack', score: 75 }, { name: 'rose', score: 96 } ] }; }, components: { children: Children }});三、使用默认值var Children = { inject: { list: { from: 'list', default: function() { return [ { name: 'tom', score: 88 }, { name: 'jack', score: 75 }, { name: 'rose', score: 96 } ]; } } }, template: '<ul><li v-for="(v,i) in list" :key="i">姓名：{{ v.name }} 分数：{{ v.score }}</li></ul>'};var app = new Vue({ el: '#js_app', components: { children: Children }});四、配合props使用var Children = { inject: ['list'], props: { clist: { type: Array, default: function() { return this.list; } } }, template: '<ul><li v-for="(v,i) in clist" :key="i">姓名：{{ v.name }} 分数：{{ v.score }}</li></ul>'};var app = new Vue({ el: '#js_app', provide: function() { return { list: [ { name: 'tom', score: 100 }, { name: 'jack', score: 66 }, { name: 'rose', score: 85 } ] }; }, components: { children: Children }}); 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #clist数组
