1. 程式人生 > >vue中插槽作用域的使用

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>