<div id="app">
        <card :type="article.type" @say-title="parent" v-for="article in articles">
            <div slot="title"><span v-html="article.title"></span></div>
            <div slot="content">
                {{article.content}}
            </div>
            <div v-if="article.auth">{{article.auth}}</div>
        </card>
    </div>
    <template id="card">
        <div class="card" :class="[color]">
            <div class="card-header" ref="head">
                <slot name="title"></slot>
            </div>
            <div class="card-body">
                <h5 class="card-title"></h5>
                <p class="card-text">
                    <slot name="content"></slot>
                </p>
                <a href="#" class="btn btn-primary" @click="say"><slot>匿名</slot></a>
            </div>
        </div>
    </template>

<script>

        let card={
            template:"#card",
            computed:{
                color(){ return 'bg-'+this.type}
            },
            methods: {
                say(){this.$emit('say-title',this.$refs.head.innerText)}
            },
            props:{
                type:{
                    type:[String],
                    default:'default'
                }
            }
        }
        let vm = new Vue({
            el:'#app',
            methods:{
                parent(tit){
                    alert(tit);
                }
            },
            components:{
                card
            },
            data:{
                articles:[
                    {type:'light',title:'<h2>标题一</h2>',content:'这是vue的文章',auth:'123'},
                    {type:'info',title:'<h2>标题二</h2>',content:'这是vue的文章',auth:'345'},
                    {type:'dark ',title:'<h2>标题三</h2>',content:'这是vue的文章',auth:'789'},
                ]
            }
        })
    </script>