作用域插槽

渲染作用域 : 该插槽可以访问与模板其余部分相同的实例 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