标签:meta 组件 aof src 方法 body panda 完整 关系
首先我们在外部建立一个组件xiaofan,并构造好其模版。
var xiaofan = { template:`<div>Panda from China!</div>` }
然后在构造器中引用这个组件
components:{ "xiaofan":xiaofan }
在html使用这个组件
<xiaofan> </xiaofan>
然后我们构造一个子组件
var city={ template:`<div>Sichuan of China</div>` }
然后我们在构造xiaofan的组件中建立一个组件方法components,然后引用这个组件,并且在模板中加入这个组件。
var xiaofan = { template:`<div> <p>Panda from China! <p> <city></city></div>`,
components:{
"xiaofan":xiaofan
}
}
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-3</title> </head> <body> <h1>component-3</h1> <hr> <div id="app"> <xiaofan></xiaofan> </div> <script type="text/javascript"> var city={ template:`<div>Sichuan of China</div>` } var xiaofan = { template:`<div> <p> Panda from China!</p> <city></city> </div>`, components:{ "city":city } } var app=new Vue({ el:‘#app‘, components:{ "xiaofan":xiaofan } }) </script> </body> </html>
标签:meta 组件 aof src 方法 body panda 完整 关系
原文地址:https://www.cnblogs.com/xiaofandegeng/p/9029088.html