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>