zoukankan      html  css  js  c++  java
  • vue中插槽作用域的使用

    一、插槽作用域

      1、简单来说就是带参数的插槽;

      2、使用方式:

        在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写

        在组件内部用slot进行接受,如果给slot加一个自定义属性,那么在组件标签的template的scope上面就可以进行接受到。
     
      3、例父组件 App.vue 中 
    <template>
        <div id="app">
            <header-com>
               <template scope="data">
                    <h2>{{data.mytitle}}</h2>
               </template>
            </header-com>
            
        </div>
    </template>

      子组件 one.vue 中

    <template>
        
        <div>
           
            <header>vue</header>
            <slot :mytitle="message"></slot>
        </div>
    </template>
    
    
    <script>
    export default {
      data() {
        return {
          message: "vue马上要改版本了,纠结。。"
        };
      },
      
    }
    </script>
    
    <style>
    </style>
  • 相关阅读:
    day14
    day13
    装饰器小题
    day12
    tes..
    1380 没有上司的舞会
    算法模板——KMP字符串匹配
    算法模板——Tarjan强连通分量
    3211: 花神游历各国
    1131: [POI2008]Sta
  • 原文地址:https://www.cnblogs.com/-roc/p/9900240.html
Copyright © 2011-2022 走看看