vue中插槽作用域的使用

Posted -roc

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 


以上是关于vue中插槽作用域的使用的主要内容,如果未能解决你的问题,请参考以下文章

vue 作用域插槽(插槽赋值)

Vue 作用域插槽

语法糖&具名插槽&作用域插槽&混入

vue插槽

[vue3进阶] 6.slot插槽3——作用域插槽

vue核心基础-插槽