<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>propsData Option 全局扩展的数据传递</title> <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no,email=no" name="format-detection"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <script src="../assets/js/flexible_css.js"></script> <script src="../assets/js/flexible.js"></script> <script src="../assets/js/vue.js"></script> </head> <body> <div id="app"> <header></header> </div> </body> <script type="text/javascript"> var header_a=Vue.extend({ //构造器的延伸 template:`<p>{{message}}-{{a}}</p>`, data:function(){ return{ message:" 我是message的值" } }, props:['a'] }); new header_a({propsData:{a:'propsData的传值'}}).$mount('header'); // 挂载到header标签上 //mount, 意思为挂载。可以理解为将vue实例(逻辑应用),挂靠在某个dom元素(载体)上的一个过程。 //propsData 不是和属性有关，他用在全局扩展时进行传递数据。 //1、在全局扩展里加入props进行接收。propsData:{a:1} //2、传递时用propsData进行传递。props:[‘a’] //3、用插值的形式写入模板。{{ a }} var app=new Vue({ el:'#app', data:{ } }) </script> </html>