直接寫給子元件值
- 在子元件建立變數，並將這個變數寫在props(陣列)
- 在父元件使用標籤方式寫子元件，並在標籤上使用v-bind綁定屬性
- v-bind前面寫子元件要的參數，後面填要傳入的參數
1
2
3
|
<div id="app">
<alert :title="'modal的標題'"></alert>
</div>
|
1
2
3
4
5
6
7
8
9
10
|
const app = Vue.createApp({})
app.component('alert',{
props: ['title'],
template: `
<div class="alert alert-primary">{{ title }}</div>
`
})
app.mount("#app");
|
<alert :title="modalTitle"></alert>，口訣：前內後外
從父元件傳給子元件
1
2
3
|
<div id="app">
<alert :title="modalTitle"></alert>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const app = Vue.createApp({
data(){
return{
modalTitle: "這是要給modal的標題"
}
}
})
app.component('alert',{
props: ['title'],
template: `
<div class="alert alert-primary">{{ title }}</div>
`
})
app.mount("#app");
|
<alert :title="modalTitle"></alert>，口訣：前內後外
單向數據流(錯誤示範)
1
2
3
|
<div id="app">
<alert :title="modalTitle"></alert>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const app = Vue.createApp({
data(){
return{
modalTitle: "這是要給modal的標題"
}
}
})
app.component('alert',{
props: ['title'],
template: `
<div class="alert alert-primary">{{ title }}</div>
<input type="text" v-model="title">
`
//當子元件上又有input去綁定v-model這個參數值，會發生錯誤
})
app.mount("#app");
|
命名限制(駝峰需轉成-)
1
2
3
4
|
<div id="app">
<!-- 如果props傳來的是駝峰，標籤就需轉成- -->
<alert :title-name="modalTitle"></alert>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const app = Vue.createApp({
data(){
return{
modalTitle: "這是要給modal的標題"
}
}
})
app.component('alert',{
//如果要使用駝峰名稱，標籤就需轉成-
props: ['titleName'],
template: `
<div class="alert alert-primary">{{ titleName }}</div>
`
})
app.mount("#app");
|
因為html只能接受英文小寫
props傳進子元件的值(查看型別)
1
2
3
4
5
6
|
<div id="app">
<table-component value="300"></table-component> <!-- string -->
<table-component :value="300"></table-component> <!-- number -->
<table-component :value="price"></table-component> <!-- number -->
<table-component :value="isStock"></table-component> <!-- boolean -->
</div>
|
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
|
const app = Vue.createApp({
data(){
return{
price: 300,
isStock: false
}
}
})
app.component('table-component',{
props: ['value','type'],
template: `
<table border>
<thead>
<tr>
<td>傳入的值</td>
<td>型別</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{ value }}</td>
<td>{{ typeof(value) }}</td>
</tr>
</tbody>
</table>
`
})
app.mount("#app");
|
沒有使用v-bind屬性綁定傳值，不論傳入什麼都是字串
props傳進子元件的值(型別驗證，查看傳入的是不是函式)
1
2
3
|
<div id="app">
<table-component :props-a="fnA"></table-component>
</div>
|
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
|
const app = Vue.createApp({
data(){
return{
fnA: function(){ return "A" }
}
}
})
app.component('table-component',{
props:{
//對應html標籤上的v-bind:props-a: 要驗證的型別
propsA: Function
},
template: `
<table border>
<thead>
<tr>
<td>傳入的值</td>
<td>型別</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{ propsA }}</td>
<td>{{ typeof(propsA) }}</td>
</tr>
</tbody>
</table>
`
})
app.mount("#app");
|
props傳進子元件的值(型別驗證，查看傳入的值是不是必填)
1
2
3
4
|
<div id="app">
<table-component :props-c="text"></table-component>
<table-component :props-c="num"></table-component>
</div>
|
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
|
const app = Vue.createApp({
data(){
return{
text: "這是一個字串",
num: 300
}
}
})
app.component('table-component',{
props:{
propsC: {
type: String,
required: true
}
},
template: `
<table border>
<thead>
<tr>
<td>傳入的值</td>
<td>型別</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{ propsC }}</td>
<td>{{ typeof(propsC) }}</td>
</tr>
</tbody>
</table>
`
})
app.mount("#app");
|
props傳進子元件的值(型別驗證，給預設值)
1
2
3
|
<div id="app">
<table-component></table-component>
</div>
|
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
|
const app = Vue.createApp({})
app.component('table-component',{
props:{
propsD: {
type: Number,
default: 300
}
},
template: `
<table border>
<thead>
<tr>
<td>傳入的值</td>
<td>型別</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{ propsD }}</td>
<td>{{ typeof(propsD) }}</td>
</tr>
</tbody>
</table>
`
})
app.mount("#app");
|
props沒有傳值時，propsD會自動顯示預設值：300
其他相關