作用域插槽的写法

作用域插槽的写法

2.6.0 更新作用域插槽
主要作用：让父组件能够访问子组件插槽中的子组件的数据。
vm实例：

<script>
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            list: ['list1', 'list2' , 'list3']
          }
        },
      }
    }
  });
</script>

子组件 childCom:

<template id="cpn">
  <div>
    <slot :oder='list'>	
    <!--list是子组件data中的数据，oder是自己命名的变量，前面还有v-bind绑定-->
      <ul>
        <li v-for="(item, index) in list" :key="index">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

父组件 app:

<div id="app">
  <cpn></cpn>
    
  <cpn>
    <template v-slot='sar'>	<!--这里的sar也是自己命名的-->
      <span>{{sar.oder.join('--')}}</span>
    </template>
  </cpn>
</div>