一、单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
二、父向子
2.1 简单参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <div id="app">
{{age}}
<button @click="age--">xx</button>
<inner user-age="100"></inner>
<inner :user-age="age"></inner>
</div>
<script type="text/javascript">
const inner = {
data() {
return{}
},
props: {
userAge:{
type:Number,
defalut:0
}
},
template: "<div>子组件的数据：{{userAge}}</div>"
}
const param = {
data() {
return {
age: 10
}
},
components: {
inner
}
}
const app = Vue.createApp(param);
app.mount('#app')
</script>
|
2.2 复杂参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <div id="app">
<inner :users="users" :num="100"></inner>
</div>
</body>
<script>
const inner = {
data() {
return {
}
},
props:{
users:{
type:Array,
default:[]
},
num:{
type:Number,
default: 0
}
},
template:`<div>
我的num是:{{num}}
<p v-for="user in users">{{user}}</p>
</div>`,
}
const param = {
data() {
return {
users:[
{"name":"zs","age":10},
{"name":"zs","age":10},
{"name":"zs","age":10},
],
xx:10
}
},
components:{
inner
}
}
var app = Vue.createApp(param);
app.mount('#app');
</script>
</html>
|
注：
<inner :users="users" :num="100"></inner> 中，:users是组件中定义的属性，第二个users是父组件定义的值- props 中的s是多个的意思。
<inner :users="users" :num="100"></inner> 可对props属性进行限制，如果num没有绑定事件，就是一个字符串数据。