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中插槽作用域的使用的主要内容,如果未能解决你的问题,请参考以下文章