码迷,mamicode.com
首页 > 其他好文 > 详细

4.作用域插槽的使用

时间:2021-01-02 11:06:25      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:script   lang   net   color   for   com   src   return   作用域   

<body>
    <div id="app">
        <cpn></cpn>
        <cpn>
            <template v-slot="slot">
                <span> {{ slot.data.join("-") }} </span>
                <!-- 拿到slot插槽里面的data 也就是pLanguages数组 把这个数组用分隔符 - 分割 -->
            </template>
        </cpn>


    </div>
    <template id="cpn">
        <div>
            <slot :data="pLanguages">
            <!-- <slot :data="pLanguages"> data是自定义的  可以随便写 把pLanguages数组放到 data里面 -->
                <ul>
                    <li v-for="item in pLanguages" slot="slot"> {{ item }} </li>
                </ul>
            </slot>
        </div>
    </template>
    <script src=‘https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js‘></script>
    <script>
        const app = new Vue({
            el: ‘#app‘,
            data: {

            },
            methods: {
                changepLan() {

                }
            },
            components: {
                cpn: {
                    template: "#cpn",
                    data() {
                        return {
                            pLanguages: ["javaScript", "c++", "c#", "JAVA", "php", "python"]

                        }
                    },

                }
            }
        })
    </script>
</body>

 

4.作用域插槽的使用

标签:script   lang   net   color   for   com   src   return   作用域   

原文地址:https://www.cnblogs.com/yanglaxue/p/14206929.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!