Vue 教程(二十四)slot 作用域

最新推荐文章于 2022-09-26 21:40:40 发布

_否极泰来_

最新推荐文章于 2022-09-26 21:40:40 发布

阅读量283

点赞数

分类专栏： # Vue教程

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/yuan_xw/article/details/119512580

版权

Vue教程专栏收录该内容

49 篇文章 24 订阅

订阅专栏

Vue 教程(二十四)slot 作用域

父组件通过 “slot-scope” 来接收子组件传过来的插槽数据，再根据插槽数据来填充插槽的内容

代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>slot作用域</title>
  </head>
  <body>
    <div id="app">
      <language-component>
        <template slot-scope="slot">
          <div>{{slot.data.join(' - ')}}</div>
        </template>
      </language-component>

      <language-component>
        <template slot-scope="slot">
          <div>{{slot.data.join(' * ')}}</div>
        </template>
      </language-component>

      <language-component>
        <template slot-scope="slot">
          <div>{{slot.data.join(' # ')}}</div>
        </template>
      </language-component>
    </div>
    <template id="languageTemplate" slot-scope="slot">
      <slot :data="languages">
        <ul>
          <li v-for="(item, index) in languages">{{item}}</li>
        </ul>
      </slot>
    </template>

    <script>
      const languageComponent = {
        template: "#languageTemplate",
        data() {
          return {
            languages: [
              "C",
              "Java",
              "Python",
              "C++",
              "C#",
              "Visual Basic",
              "PHP",
              "R",
              "Groovy",
            ],
          };
        },
      };
      const app = new Vue({
        el: "#app",
        components: {
          languageComponent,
        },
      });
    </script>
  </body>
</html>

– 以上为《Vue 教程(二十四)slot 作用域》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)

_否极泰来_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 教程(二十四)slot 作用域

Vue 教程(二十四)slot 作用域父组件通过 “slot-scope” 来接收子组件传过来的插槽数据，再根据插槽数据来填充插槽的内容代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name=
复制链接

扫一扫

专栏目录