props

2019鐵人賽 vue.js

Andy Tsai

團隊好想工作室第二屆鐵人賽

2018-11-01 09:26:54

1762 瀏覽

分享至

菜菜菜的 Vue 30天 - Day17

前一章我們提到了 component 與頁面或其他 component 間的傳值，這邊我們先拿前一章的圖片來介紹～

前一章有提到我們能夠使用 component 建立一個完整的網頁，結構就像下面這樣，我有可能會有很多節點，component 裡面還能夠放 component，最上面的那個節點就是 <div id="app"></div> 。

而這些節點間的關係我們會稱為子父層，那子父層間的傳值就要透過 2 個方式，如下圖：

props

那首先這章會先介紹父層傳值到子層的 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>

To DO List

上面已經介紹了 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 的渲染就大功告成啦～