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的应用，他的作用就是在单页应用中保持状态和数据的。