vue中插槽作用域的使用

最新推荐文章于 2024-10-30 18:24:25 发布

aiffqi5045

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/-roc/p/9900240.html

版权

一、插槽作用域

　　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>

转载于:https://www.cnblogs.com/-roc/p/9900240.html