基础
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>processData</title></head><body> <h1>processData option demo</h1> <hr> <div id="app"> <header></header> </div> <script src="../js/vue.js"></script> <script type="text/javascript"> var header_a = Vue.extend({ template: ` <p> {{message}} </p> `, data: function () { return { message: "hello I am header" } }, }); new header_a().$mount('header') </script></body></html>复制代码
传值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>processData</title></head><body> <h1>processData option demo</h1> <hr> <div id="app"> <header></header> </div> <script src="../js/vue.js"></script> <script type="text/javascript"> var header_a = Vue.extend({ template: ` <p> {{message}} -- {{a}} </p> `, data: function () { return { message: "hello I am header" } }, props: ['a'] }); new header_a({ propsData: { a: 1 } }).$mount('header') </script></body></html>复制代码
注意点
传值接收使用 props 而不是prop
processData 是对象的形式