码迷,mamicode.com
首页 > 其他好文 > 详细

slot是标签的内容扩展,也就是说你用slot就可以在自定义组件时传递给组件内容,组件接收内容并输出

时间:2017-06-06 01:15:12      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:定义   register   html   color   blog   输出   .com   年龄   自定义组件   

html
<div id="app">
        <register>
                <span slot="name">{{message.name}}</span>
                <span slot="sex">{{message.sex}}</span>
                <span slot="age">{{message.age}}</span>
        </register>    
</div>

<template id="tmp">
        <div>
             <div>姓名 : <slot name="name"></slot></div>
             <div>性别 : <slot name="sex"></slot></div>
             <div>年龄 : <slot name="age"></slot></div>
        </div>
</template>    
js
var model = {
        template:`#tmp`
    }
    // 全局
    // Vue.component(‘register‘,model)
       var vm = new Vue({
          el:"#app",
          data:{
            message:{
                name:"小智",
                sex:"男",
                age:24
            }
          }
          ,
          components:{
             "register":model
          }
       }) 

 

slot是标签的内容扩展,也就是说你用slot就可以在自定义组件时传递给组件内容,组件接收内容并输出

标签:定义   register   html   color   blog   输出   .com   年龄   自定义组件   

原文地址:http://www.cnblogs.com/model-zachary/p/6947671.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!