<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<!-- 傳遞的方法名不要是駝峰命名，這是個坑 ，找了好久沒找到原因 -->
<!-- 定義了兩個元件，一個是發表元件，一個是評論列表元件 -->
<submit @func='addMessage'></submit>
<list2 :list='list'></list2>
</div>
<template id="list">
<div class="list-group">
<a v-for="item in list" href="#" class="list-group-item active">
<h4 class="list-group-item-heading">{{item.name | addS}}</h4>
<p class="list-group-item-text">{{item.content}}</p>
</a>
</div>
</template>
<template id="submit">
<form action="" method="POST" role="form">
<legend>發表評論</legend>
<div class="form-group">
<label>使用者名稱</label>
<input v-model="name" type="text" class="form-control" id="" placeholder="輸入使用者名稱">
<label>評論框</label>
<textarea v-model="content" class="form-control" id="" placeholder="輸入內容"></textarea>
</div>
<button @click.prevent='addMessage' type="submit" class="btn btn-primary">提交</button>
</form>
</template>
<script>
//新增過濾器 增加：
// Vue.filter('addS', function (msg) {
// return msg + ":"
// })
var vm = new Vue({
el: '#app',
data: {
name: '',
content: '',
list: [{
'name': '勒布朗',
'content': '誰來湖人呀'
}],
},
methods: {
addMessage(name, content) {
console.log(name, content, "父元件事件")
this.list.push({ 'name': name, 'content': content })
this.name = this.content = ''
//this.list = newlist
},
show(data) {
console.log("執行了事件A------" + data)
}
},
components: {
'list2': {
template: '#list',
props: ['list']
},
'submit': {
template: '#submit',
props: ['name', 'content'],
methods: {
// 新增評論方法
addMessage() {
console.log(this.name, this.content)
// 使用$emit呼叫func 傳遞 name,content
this.$emit('func', this.name, this.content)
},
},
}
}
});
Vue.config.devtools = true
</script>
</body>
</html>
本作品採用《CC 協議》，轉載必須註明作者和本文連結