Vue作用域插槽

场景：子组件中存在一组数据，在子组件中是在span中显示的，但在父组件希望换一种方式来显示，比如button

解决方案：作用域插槽

子组件：
    <template id="cpn">
        <div>
            <slot :data="pLanguages">   // slot绑定数据
                <span v-for="item in pLanguages">{{item}}</span>
            </slot>
            
        </div>
    </template>

父组件调用：
    <div id="app">
        <cpn>
            <template v-slot="{data}">  // 父组件调用  老版本可能为：slot-scope="planguange"
                <button v-for="item in data">{{item}}=====</span>         
            </template>
        </cpn>
    </div>

显示结果：