父組件傳值給子組件 (使用 props 屬性)
當需要做動態的綁定將父組件的資料傳給子組件的方式是 props，而 props 是單向傳遞
引入 issue-create 組件 (props 需要轉換相對應的 kebab-case (短橫線隔開) 方式命名
父組件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <template lang="pug">
div.dvIssue
issue-create(:info="info")
</template>
<script lang="coffee">
import IssueCreate from '@/IssueCreate'
export default
name: 'IssueShow'
components: {
IssueCreate
}
data: ()->
info:
msgVal: 'abc'
</script>
|
子組件
接收時，就用 props 屬性
1
2
3
4
5
6
7
8
9
10
11
12
| <template lang="pug">
div.dvIssueCreate
span {{ info.msgVal }}
</template>
<script lang="coffee">
export default
name: 'IssueCreate'
props:
info:
type: Object # 指定傳入的類型，如果類型不正確就會警告
</script>
|
子組件傳值給父組件 ($emit)
有因為props 是單向傳遞的，主要是為了避免子組件不小心修改父組件的狀態，造成可怕現象。所以若我們想在子組件通知父組件的話，可以透過觸發事件來通知父組件 $emit 方法。
父組件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template lang="pug">
div.dvIssue
issue-create(v-on:issueState="onIssueCallback")
</template>
<script lang="coffee">
import IssueCreate from '@/IssueCreate'
export default
name: 'Issue'
components: {
IssueCreate,
}
methods:
onIssueCallback: (data)->
# 寫回傳後續的操作
console.log(data)
</script>
|
子組件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <template lang="pug">
div.dvIssueCreate
v-btn(@click="onCreate()") 這是按鈕
</template>
<script lang="coffee">
export default
name: 'IssueCreate'
methods:
onCreate: ()->
param =
data: 'Hello'
@.$emit('issueState', param)
</script>
|