父组件向子组件传值使用props
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-组件使用</title>
<style>
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th, td {
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: center;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
</style>
<!-- <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
</head>
<body>
<!--父组件-->
<div id="app">
<cpu :cbooks="books"></cpu>
</div>
<!--子组件-->
<template id="cpu">
<div>
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in cbooks">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
//接受来自父组件的信息
const cpu = ({
template: '#cpu',
props: {
cbooks: {
type: Array,
default: []
}
},
data() {
return {}
}
})
//父组件
const app = new Vue({
el: '#app',
data: {
books: [
{
id: 1,
name: '《算法导论》',
date: '2016-04-10',
price: 89.00,
count: 1
},
{
id: 2,
name: "《vue实战编程》",
date: "2016-04-10",
price: 80.00,
count: 1
},
{
id: 3,
name: "《ES6》",
date: "2016-04-10",
price: 78.00,
count: 1
},
{
id: 4,
name: "《UNIX大全》",
date: "2016-04-10",
price: 69.00,
count: 1
},
]
},
components: {
cpu
}
})
</script>
</body>
</html>
结果
传值的过程
- 第一步
- 第二步
子组件向父组件传值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-组件使用</title>
<!-- <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
</head>
<body>
<!--父组件-->
<div id="app">
<h1>{{message}}</h1>
<h1>进行加减结果是:{{total}}</h1>
<cpu @increment="changeTotal" @decrement="changeTotal"></cpu>
</div>
<!--子组件-->
<template id="cpu">
<div>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
//传给父组件的信息
const cpu = ({
template: '#cpu',
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
this.$emit('increment', this.count)
},
decrement() {
this.count--
this.$emit('decrement', this.count)
}
}
})
//父组件
const app = new Vue({
el: '#app',
data: {
message: '我们正在使用子组件向父组件传值',
total: 0
},
methods: {
changeTotal(count) {
this.total = count
}
},
components: {
cpu
}
})
</script>
</body>
</html>
结果
流程
- 第一步
- 第二步
最后
通过两个小小的案例可以增加自己对vue父子组件有了一个深刻的认识,如何使用props和emit进行父子组件的传值和操作。