propsData Option全局擴展數據傳遞 · web前端

propsData 不是和屬性有關，他用在全局擴展時進行傳遞數據。先回顧一下全局擴展的知識，作一個`<header></header>`的擴展標簽出來。實際我們并不推薦用全局擴展的方式作自定義標簽，我們學了組件，完全可以使用組件來做，這里只是為了演示propsData的用法代碼如下 ~~~ <body> <header></header> </body> <script type="text/javascript"> var app = Vue.extend({ template: `<p>{{message}}</p>`, data: function () { return { message: 'hello vue', } } }); new app().$mount('header'); </script> ~~~ 擴展標簽已經做好了，這時我們要在掛載時傳遞一個數字過去，我們就用到了propsData。我們用propsData三步解決傳值： 1. 在全局擴展里加入props進行接收。`propsData:{a:1}` 2. 傳遞時用propsData進行傳遞。`props:[‘a’]` 3. 用插值的形式寫入模板。`{{ a }}` ~~~ <body> <header></header> </body> <script type="text/javascript"> var app = Vue.extend({ template: `<p>{{message}}---{{a}}</p>`, data: function () { return { message: 'hello vue', } }, props: ['a'] }); new app({ propsData: { a: 1 } }).$mount('header'); </script> ~~~ 總結：propsData在實際開發中我們使用的并不多，我們在后邊會學到Vuex的應用，他的作用就是在單頁應用中保持狀態和數據的。