美文网首页
在vue中插槽的使用

在vue中插槽的使用

作者: blank的小粉er | 来源:发表于2018-06-14 16:55 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <child>
            <div slot="header">header</div>
            <div slot="footer">footer</div>
        </child>
    
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <script>
    
        Vue.component('child',{
            template:`<div>
                          <slot name="header"></slot>
                           <p>hello</p>
                           <slot name="footer"></slot>
                           
                        </div>`,            
        })
    var vm=new Vue({
        el:"#root"
    })
</script>
</body>
</html>

相关文章

  • 2020-07-23 一次性讲明白vue插槽slot

    vue插槽slot 一、前言 vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容,那插槽是怎么使用的...

  • vue插槽slot

    vue插槽slot 一、前言 vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容,那插槽是怎么使用的...

  • 18、Vue3 作用域插槽

    作用域插槽:让插槽内容能够访问子组件中,vue2中作用域插槽使用slot-scope,vue3中使用v-slot ...

  • (十八)补充-Vue3中插槽的使用

    本章我们将了解到的是vue3中常用插槽的使用; vue3中的插槽是在用的时候和vue2的区别略有不同,常见插槽使用...

  • 详解vue中的插槽

    1.在vue中插槽分为具名插槽和非具名插槽;而插槽的使用主要是我们在页面中存在很多个相似但却重复的部分; 首先我以...

  • vue插槽

    vue插槽slot的理解与使用 vue slot插槽的使用介绍及总结

  • vue 插槽的使用

    vue 插槽手册 深入理解vue中的slot与slot-scope 插槽的使用其实是很简单首先要明白插槽是使用在子...

  • 在vue中插槽的使用

  • 在Vue中如何使用插槽

    很重要,很多第三方的Vue的插件或者模块中都大量的使用了插槽这种特性。使用场景:Vue父组件向子组件传递dom结构...

  • vue 作用域插槽(插槽赋值)

    使用vue开发时,组件插槽slot是我们经常使用的特性之一,有时我们插槽中的自定义内容需要使用组件中的数据,这时就...

网友评论

      本文标题:在vue中插槽的使用

      本文链接:https://www.haomeiwen.com/subject/plwyeftx.html