vue中插槽作用域的使用

<template>
    <div id="app">
        <header-com>
           <template scope="data">
                <h2>{{data.mytitle}}</h2>
           </template>
        </header-com>
        
    </div>
</template>

<template>
    
    <div>
       
        <header>vue</header>
        <slot :mytitle="message"></slot>
    </div>
</template>


<script>
export default {
  data() {
    return {
      message: "vue马上要改版本了，纠结。。"
    };
  },
  
}
</script>

<style>
</style>