vue组件插槽与编译作用域
Posted cl94
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue组件插槽与编译作用域相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app"> <cpn> <!-- 插槽-插入 --> <!-- 注意,由于编译作用域的概念,这里是在#app的作用域,所以这里showIt使用的是app实例对象的属性 --> <span slot="center" v-show="showIt"> 你好 </span> </cpn> </div> <template id="cpn"> <div> <span>左边</span> <!-- slot:插槽 name="center"给插槽具名 --> <slot name="center"> <!-- 插槽默认值 --> <span>中间</span> </slot> <span>右边</span> </div> </template> <script> // 组件的插槽: // 组件的插槽也是为了让我们封装的组件更具扩展性 // 让使用者可以决定组件内部的一些内容到底显示什么 const app = new Vue({ el: "#app", data: { message: ‘你好啊‘, showIt: 1 }, /*注册组件*/ components:{ cpn: { template: ‘#cpn‘, } }, }) </script> </body> </html>
以上是关于vue组件插槽与编译作用域的主要内容,如果未能解决你的问题,请参考以下文章