vue的作用域插槽

最新推荐文章于 2024-04-26 17:37:33 发布

简宁909

最新推荐文章于 2024-04-26 17:37:33 发布

阅读量131

点赞数

文章标签： vue.js 前端 css

本文链接：https://blog.csdn.net/coco_998/article/details/113572560

版权

vue中的插槽，他的作用域有了解过吗~~~~知道你没有，跟我来了解了解

插槽的作用区域，顾名思义就是这个插槽使用像js的作用域一样，有一定的作用范围，比如子组件在插槽中已经定义好了一种展示风格，但父组件不想这么展示，想改一种展示方式，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 根组件 -->
     <div id="app">
       <cpn> </cpn>    
       // <cpn slot='aa'> </cpn> 
       <cpn> 
           //目的是获取子组件中的pLanguages  slot可以引用下面子组件的插槽对象
           <template slot-scope='slot'>
             //  <span v-for='item in slot.data'>{{item}} -</span>
               <p>{{slot.data.join('-')}} </p>

           </template>
       </cpn>
    </div>
    <!-- 子组件 -->
    <template id="cpn">
        <div>
            <slot  :data='pLanguages'>
                 // <slot name='aa'>
                <ul>
                    <li v-for="item in pLanguages">{{item}}</li>
                </ul>
             </slot>
        </div>
    </template>
    <script src="../../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {},
        components:{
            cpn:{
                template:"#cpn",
                data(){
                    return{
                        pLanguages:['javacript','c++','c#','vue','angular']
                    }
                },
                methods: {
                  
                },
            }
        }
      })
    </script>
</body>
</html>

简宁909

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的作用域插槽

vue中的插槽，他的作用域有了解过吗~~~~知道你没有，跟我来了解了解插槽的作用区域，顾名思义就是这个插槽使用像js的作用域一样，有一定的作用范围，比如子组件在插槽中已经定义好了一种展示风格，但父组件不想这么展示，想改一种展示方式，代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi
复制链接

扫一扫