前一章我們提到了 component 與頁面或其他 component 間的傳值,這邊我們先拿前一章的圖片來介紹~
前一章有提到我們能夠使用 component 建立一個完整的網頁,結構就像下面這樣,我有可能會有很多節點,component 裡面還能夠放 component,最上面的那個節點就是 <div id="app"></div>
。
而這些節點間的關係我們會稱為子父層
,那子父層間的傳值就要透過 2 個方式,如下圖:
那首先這章會先介紹父層
傳值到子層
的 props,就先建立一個簡單的 component 吧~
這邊要實現一個功能,p 裡面能夠同步顯示 input 輸入的值
我們將 input 綁定到 data 的 message 上,接下來要怎麼樣傳入 component 內呢?!
我們就在 component 上使用 v-bind:
綁定一個屬性,裡面帶入我們所要傳入 component 的值
然後接下來在 component 裡面使用 props
來接,props 的格式會是一個陣列,陣列裡面會填入 component 要接的值,也就是 component 上所綁定的屬性,這樣 props 街道的值就可以直接拿來使用囉,如下:
<body>
<div id="app">
<input type="text" v-model="message">
<message-block :message="message"></message-block>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
message: '',
},
components: {
'message-block': {
props: ['message'],
template: `<p>props:{{message}}</p>`
}
}
})
</script>
上面已經介紹了 props 怎麼使用,接下來我們就拿前幾章練習的 to do list 來實做一下吧~
首先我們先將 list 的部份把它封裝成一個 component 吧
<body>
<div id="app">
<input type="text" v-model="newTodo">
<button @click="addToDo">Add</button>
<to-do-list :todos="todos"></to-do-list>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
newTodo: '',
todos: []
},
methods: {
addToDo() {
this.todos.push(this.newTodo);
this.newTodo = '';
},
removeToDo(index) {
this.todos.splice(index, 1)
}
},
components: {
'to-do-list': {
props: ['todos'],
template: `<ul>
<li v-for="(todo, index) in todos">{{todo}}
<button @click="removeToDo(index)">Remove</button>
</li>
</ul>`
}
}
})
</script>
我們一樣將父層 data 的 todos 綁定到 component 上將值傳進去,並且在 component 裡面使用 props 接進來,後面一樣使用 v-for 來做 list 的渲染就大功告成啦~
下一章會來介紹子層傳值到父層囉~