Vue中作用域插槽的妙用

最新推荐文章于 2023-01-03 11:30:22 发布

Lsx～

最新推荐文章于 2023-01-03 11:30:22 发布

阅读量468

点赞数

分类专栏： Vue Web前端分享一下我的心得文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_47339511/article/details/113858603

版权

分享一下我的心得同时被 3 个专栏收录

53 篇文章 0 订阅

订阅专栏

Web前端

36 篇文章 1 订阅

订阅专栏

Vue

14 篇文章 2 订阅

订阅专栏

昨天在学后台管理项目的时候遇到了有趣的东西-----作用域插槽
为什么scope.row可以获得本行的数据，说明这个大神在封装组件的时候，用了一个插槽<slot :row=data></slot>
在这里插入图片描述

话又说回来，什么是作用域插槽：当我们在封装组件的时候，要使用作用域插槽，必然会往里面传个slot，通过这个插槽往外面传递数据，我们只需要在此插槽上绑定一个动态属性，然后把数据赋值给这个动态属性（我这里是:data=“PLanguage”），之后我们在使用组件是，或使用其他人封装好的组件时，通过作用域插槽就可以很容易的得到组件内的data数据，我们只需要在组件中（我这里是cpn组件，需要绑定一个slot-scope属性，它的名字是啥无所谓）添加一个template标签，然后在此标签内部就可以得到组件的data数据了。slot-scope也可以换成v-slot

<!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>
            <!-- 目的是获取子组件中的pLanguage -->
            <template slot-scope="a">
              <!-- <span v-for="item in a.data">{{item}}</span> -->
              <!-- <span v-for="item in a.data">{{a.data.join('-')}}</span> -->
              <span>{{a.data.join('-')}}</span>
              
            </template>
        </cpn>
        <cpn></cpn>
    </div>
    <template id="cpn">
      <div>
				<!-- 这是插槽中的默认内容，如果组件中有其它内容，会把该内容覆盖 -->
        <slot :data="PLanguage">
          <ul>
            <li v-for="item in PLanguage">{{item}}</li>
          </ul>
        </slot>
      </div>
    </template>
    <script src='/vue.js '></script>
    <script>
        //父组件替换插槽的标签，但是内容由子组件来提供
        const app = new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            components: {
                cpn: {
                    template: '#cpn',
                    data() {
                        return {
                            PLanguage: ['JavaScript', 'Java', 'C++', 'PHP'],
                        }
                    },
                },
            },
        });
    </script>
</body>

</html>

Lsx～

关注

0
点赞
踩
1

收藏

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

昨天在学后台管理项目的时候遇到了有趣的东西-----作用域插槽为什么scope.row可以获得本行的数据，说明这个大神在封装组件的时候，用了一个插槽<slot :row=data></slot>话又说回来，什么是作用域插槽：当我们在封装组件的时候，要使用作用域插槽，必然会往里面传个slot，通过这个插槽往外面传递数据，我们只需要在此插槽上绑定一个动态属性，然后把数据赋值给这个动态属性（我这里是:data=“PLanguage”），之后我们在使用组件是，或使用其他人封装好的组件
复制链接

扫一扫

专栏目录