零基础学习Vue: 第30课 Vue子组件实现动态文章列表小案例：
程序员文章站
2022-04-24 09:47:35
...
实现后的效果图：
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入网上bootstrap内写好的css样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/css/bootstrap.min.css">
<!-- 点的写一下父组件的样式 -->
<style>
*{margin:0;padding:0;}
#app{
width:1200px;
margin:auto;
}
</style>
</head>
<body>
<div id="app">
<!-- 4.引入组件 遍历父组件articles数组数据 v-for遍历组件需加key值 父组件传入type属性 与 sign个性签名数据 -->
<panel v-for="(article,index) in articles" :key="index" :type="article.type" :sign="article.sign">
<!-- 插入title插槽 -->
<h3 slot="title">{{article.title}}</h3>
<!-- 插入content插槽 -->
<p slot="content" class="panel-body">{{article.content}}</p>
<!-- 插入author插槽 -->
<p slot="author" v-if="article.author">作者：{{article.author}}</p>
</panel>
</div>
<!-- 3.设置子组件panel标签样式 -->
<template id="panel">
<!-- :class="heaven"设置动态clss属性样式,当子组件panel内heaven属性不同 对应样式也改变 -->
<div class="panel" :class="heaven">
<div class="panel-heading">
<!-- 定义插槽 -->
<slot name="title"></slot>
</div>
<div class="panel-body">
<!-- 定义插槽 -->
<slot name="content"></slot>
</div>
<div class="panel-footer">
<!-- 定义插槽 -->
<slot name="author">
<p>匿名</p>
</slot>
</div>
<div class="panel-footer">
<!-- 在子组件设置一个点击事件 -->
<button class="btn btn-success" @click="fn">查看作者个性签名</button>
</div>
</div>
</template>
<script>
//1.定义子组件panel
let panel = {
template:'#panel',
props:['type','sign'], //获取父组件传过来的数据
data(){
return{
insign:''
}
},
methods:{
fn(){
//如果父组件传过来的sign有值则显示，没有则显示默认的个性签名
this.insign = this.sign? this.sign : '这家伙很懒，什么也没写'
//this.$el...获取根节点的第二个子节点的内容 this.sign父组件传递过来的数据
alert(this.$el.children[2].innerText+'。个性签名：'+this.insign)
}
},
computed:{ //时时监测计算属性缓存
heaven(){ //一个时时监测的属性heaven
return 'panel-' + this.type
}
}
}
let vm = new Vue({
el:'#app',
data:{
//articles数组模拟文章数据
articles:[
{type:'success',title:'什么是vue',content:'vue文章',author:'小马',sign:'世界上有两种人，一种努力的，一种不努力的'},
{type:'warning',title:'什么是react',content:'react文章',author:'小强',sign:'宝剑锋从磨砺出，梅花香自苦寒来！'},
{type:'danger',title:'什么是js',content:'js文章'}
]
},
components:{ //2.注册子组件panel
panel
}
})
</script>
</body>
</html>