有关于vue.js中作用域插槽的新用法

看例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script SRC="../js/vue.js" type="text/javascript"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn></cpn>
    <cpn>
        <!--作用域插槽写法-->
        <template v-slot:languages="slot">
            <span v-for="item in slot.data">《 {
   
   {item}} 》</span>
        </template>
    </cpn>
</div>
<template id="cpn">
    <div>
        <slot name="languages" :data="languages">
            <ul>
                <li v-for="item in languages">{
   
   {item}}</li>
            </ul>
        </slot>
    </div>
</template>

</body>
<script>
    const app=new Vue({
     
     
        el: '#app',
        data: {
     
     },
        components:{
     
     
            cpn:{
     
     
                template:`#cpn`,
                data(){
     
     
                    return{
     
     
                        languages:['javascript','c++','java','python','go','swift']
                    }
                }
            }
        }
    });
</script>
</html>

上面的

<template v-slot:languages="slot">
            <span v-for="item in slot.data">《 {
   
   {item}} 》</span>
</template>

就是新写法，父组件用子组件的数据
其中slot是任意的，可以理解是接收子组件数据一个变量名，languages是插槽名，如果去掉=“slot”,它就是v-slot的新用法，也就是具名组件，具名组件故名思意就在模板template中有插槽slot，其有属性name=“xxx”，html中要使用对应的插槽，就得使用

<template v-slot:插槽名>
     
</template>

上面这个也是新用法
看了那么多同行写的真心看不懂在写啥，只能自己写，希望对大家有帮助

有关于vue.js中作用域插槽的新用法

猜你喜欢