Vue 插槽

<body>

<script src="../libs/vue.js"></script>

<div id="app">

    <com1>

        <h2 slot="one">张三</h2>

        <h2 slot="two">欢迎来到Vue的世界</h2>

    </com1>

</div>

<template id="temp1">

    <div>

        <!--插槽-->

        <slot name="one"></slot>

        <h2>你好</h2>

        <slot name="two"></slot>

    </div>

</template>

<script>

    Vue.component('com1', {

        template: '#temp1',

    })

    var app = new Vue({

        el: '#app',

        data: {

            message: '',

        },

    })

</script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.插槽的概念: 插槽是子组件给父组件提供的占位符,用 来表示,父组件可以在这个占位符中填充任何模板代码,如 H...
    微笑曲线_8eee阅读 1,683评论 0 0
  • 组建代码:全局组件,局部组件(组件一定需要一个根标签) 全局组件:Vue.component(id,[defini...
    弦生_a3a3阅读 1,651评论 0 0
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 9,013评论 0 6
  • <com1></com1> <!--com2给com1发消息--> <com2></com2> <te...
    mage1160阅读 3,526评论 0 0
  • 框架和插件 框架不能轻易换,库可以 MVC和MVVM node(后端)中MVC:后端的分层开发概念 MVVM是前端...
    骆骆呀阅读 1,456评论 0 0