作用域插槽

2022-07-13 14:35:15 阅读：143 来源： 互联网

渲染作用域 : 该插槽可以访问与模板其余部分相同的实例 property (即相同的“作用域”)。
作用域：本质用来访问数据
有时让插槽内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时，这是一个常见的情况，我们希望能够自定义每个项目的渲染方式。

 1  <div id="app">
 2         <p>{{msg}}</p>
 3         <!--  如果在插槽中可以直接访问父组件中的data， 但是如果在子组件的模板template 中访问父组件中的data， 需要 组件通信 -->
 4         <child v-bind:msg="msg">
 5             <!-- obj是自定义的对应的是下面的第一个arr 接受的是一个对象 都是自定义的名字 用来接收默认插槽提供的数据 -->
 6             <template v-slot='obj'>  // obj 就是对应子组件data数据里面的arr整个数组
 7                 <p v-for="item in obj.arr">{{obj}} --- {{item}}</p>
 8             </template>
 9 
10             <!-- 接收具名插槽提供的数据 -->
11             <!-- <template v-slot:nav="obj2">
12                 <strong>{{obj2.msg}}</strong>
13             </template> -->
14 
15             <!--  插槽解构 -->
16             <template v-slot:nav="{a, b}">
17                 <strong>{{a}} ==== {{b}}</strong>
18             </template>
19         </child>
20     </div>

 1 <script src="./js/vue.global.min.js"></script>
 2     <script>
 3         const app = Vue.createApp({
 4             data() {
 5                 return {
 6                     msg: '定义数据'
 7                 }
 8             }
 9         })
10 
11         const Child = {
12             data() {
13                 return {
14                     arr: [1, 23, 4, 5]
15                 }
16             },
17             //  插槽 prop 
18             // 第一个arr是自定义的属性名 第二个arr是child data数据里面的arr
19             template: `
20                 <div>
21 
22                     <slot :arr='arr' title='静态数据'></slot>
23                     <strong>{{msg}}</strong>
24                     <hr><hr>
25                     <slot name='nav' msg='具名插槽提供数据' a='100' b='300'>具名插槽</slot>
26                 </div>
27             `,
28             props: ['msg']
29         }
30 
31         app.component('Child', Child)
32         app.mount('#app')
33     </script>

标签：arr,作用域,插槽,app,msg,data
来源： https://www.cnblogs.com/szsy/p/16473704.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

作用域插槽