總結下思路：
- 讀取並保存子組件的 傳過來的對象，保存在localstorage 裏
- 組建就可以 在localstorage 裏讀取值，然後展示
- 解決自動刷新問題， 就是用 子組件通過 this.$emit(func) ,調取組建的展示方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >
<link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
</head>
<body>
<div id="pp">
<div>
<login @func="show"></login>
</div>
<div>
<table class="table table-hover">
<thead>
<tr><th>用例名稱</th><th>狀態</th><th>負責人</th></tr>
</thead>
<tbody v-for="item in list">
<tr class="warning"><td>{{item.case_name}}</td><td>{{item.case_status}}</td><td>{{item.owner}}</td></tr>
</tbody>
</table>
</div>
</div>
<template id="tmp1">
<div >
<form role="form" >
<div class="form-group">
<label for="casename">用例名稱</label>
<div>
<input type="text" v-model="name" class="form-control" id="casename" placeholder="請輸入用例名稱">
</div>
</div>
<div class="form-group">
<label for="casestatus" >用例狀態</label>
<div >
<input type="text" v-model="status" class="form-control" id="casestatus" placeholder="請輸入用例狀態">
</div>
</div>
<div class="form-group">
<label for="owner" >用例負責人</label>
<div>
<input type="text" v-model="owner" class="form-control" id="owner" placeholder="請輸入用例負責人">
</div>
</div>
<div class="form-group">
<div >
<input type="button" @click="posdata" class="btn btn-primary" value="提交">
</div>
</div>
</form>
</div>
</template>
<script>
var component={
template:'#tmp1',
data(){
return {
name:'',
status:'',
owner:''
};
},
methods:{
posdata(){
var data={case_name:this.name,case_status:this.status,owner:this.owner}
var list= JSON.parse(localStorage.getItem('cst') || '[]')
list.unshift(data)
localStorage.setItem('cst', JSON.stringify(list))
this.name=this.status=this.owner=''
this.$emit('func')
}
}
}
var vue=new Vue(
{
el:'#pp',
data:{
list:[{case_name:'校驗密碼',case_status:'Pass',owner:'貂蟬'},{case_name:'校驗用戶名',case_status:'Fail',owner:'呂布'}]
},
created(){
this.show()
},
methods: {
show(){
this.list=JSON.parse((localStorage.getItem('cst'))|| '[]')
}
},
components:{
login:component,
}
}
)
</script>
</body>
</html>