iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0

菜菜菜的 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 的渲染就大功告成啦~

下一章會來介紹子層傳值到父層囉~


上一篇
components
下一篇
$emit
系列文
菜菜菜的 Vue 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言