iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
0
Data Technology

讓你資料美美的(d3.js+vue.js)系列 第 7

Vue的prop

prop簡介

Component有一個獨立的作用域(isolated scope),使用Component主要是希望程式碼不會互相影響,而當需要讓父層級(parent)傳遞參數給子層級(child)時,就可以使用prop來達成。
https://ithelp.ithome.com.tw/upload/images/20171227/20105602OALpEB0WbW.png
圖片來源:Composing-Components

P.S:不過如果改變的時候傳遞的型態是object或是array時,還是有可能會改變父層級的內容

prop

prop可以定義

  • 變數名稱
    • 預設值(default)
    • 型態(type)
    • 驗證(validator)之後才會提到
var viwer=Vue.component('viwer',{
    template: `
        <div>
            <ul>
                <li>
                    {{message}}
                </li>
            </ul>
        </div>
    `,
    props:{
        message:{
            type: String,
            default:"test",
        },  
    },
});

結果如圖https://ithelp.ithome.com.tw/upload/images/20171227/20105602YnG2vwOYso.png

完整程式碼https://codepen.io/FanWay/pen/KZaaeR


上一篇
繼續介紹Vue的component
下一篇
Vue的prop,v-model
系列文
讓你資料美美的(d3.js+vue.js)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言