vue中插槽作用域的使用
阿新 • • 發佈:2018-11-03
一、插槽作用域
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>