props数据一定是单向的
-
<strong>prop默认是单向绑定</strong>
-
当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态。
-
案例验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<table>
<tr>
<th colspan="3">父组件</th>
</tr>
<tr>
<td>国家</td>
<td>{{country}}</td>
<td><input type="text" v-model="country"></td>
</tr>
<tr>
<td>地区</td>
<td>{{area}}</td>
<td><input type="text" v-model="area"></td>
</tr>
</table>
<br>
<my-child :child-country="country" :child-area="area"></my-child>
</div>
<template id="child">
<table>
<tr>
<th colspan="3">子组件</th>
</tr>
<tr>
<td>国家</td>
<td>{{ childCountry }}</td>
<td><input type="text" v-model="childCountry"></td>
</tr>
<tr>
<td>地区</td>
<td>{{ childArea }}</td>
<td><input type="text" v-model="childArea"></td>
</tr>
</table>
</template>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
country: '中国',
area: '亚洲'
},
components:{
'my-child': {
template: '#child',
props: [ "childCountry", "childArea"]
}
}
})
</script>
</body>
</html>
- 运行结果：
vueb5.png
- 结论
在vuejs2.0中，任何试图在组件内修改通过props传入的父组件数据都被认为是anti-pattern的。
网友评论