作用域插槽

作用域插槽是啥?
官方一点的:父组件应用子组件可以给插槽填充内容，但一般只填充html标签，里边的数据信息要由插槽自己提供，这个过程称为作用域插槽
自己总结的俗话:父组件在用子组件来填充插槽的时候有时候需要用到子组件里面插槽的数据 .
子组件文件插槽上带的数据在父组件的子组件标签里让一个标签带有slot-scope="xxx" 去接收以便在下面进行调用

转自：https://www.jianshu.com/p/3f6ec6b09e9f
我的理解:就是父组件要修改插槽的内容,要获取到子组件中的数据,子组件文件插槽上带的数据在父组件的子组件标签里让一个标签带有slot-scope="xxx" 去接收

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<div id="app">
    <cpn>
      <%--  <template slot-scope="myslot">
            <span v-for="item in myslot.data1">{{item}}*</span>
        </template>--%>
        
        <!-- 通过v-slot-->
        <template v-slot:slotname="myslot">
            <span v-for="item in myslot.data1">{{item}}*</span>
        </template>
    </cpn>
</div>

<template id="cpn">
    <div>
        <!-- 在插槽上绑定子组件的数据planguages -->
        <slot name="slotname" :data1="planguages">
            <ul>
                <li v-for="item in planguages">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>

<script src="vue.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        planguages: ['javascript', 'c++', 'java','c', 'c#', 'python']
                    }
                }
            }
        }
    })

</script>
</body>
</html>

参考:https://blog.csdn.net/qq_39125684/article/details/90411830
https://blog.csdn.net/liushijun_/article/details/92186739