在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件,这就需要一个父子组件关系。
一、构造器外部写局部注册组件
之前我们都把局部组件的编写放到了构造器内部,如果组件代码量很大,会影响构造器的可读性,造成拖拉和错误。
我们把组件编写的代码放到构造器外部或者说单独文件。
我们需要先声明一个对象,对象里就是组件的内容。
var jspang = { template:`<div>Panda from China!</div>` }
声明好对象后在构造器里引用就可以了。
components:{ "jspang":jspang }
html中引用
<jspang></jspang>
二、父子组件的嵌套
我们先声明一个父组件,比如叫jspang
,然后里边我们加入一个city
组件,我们来看这样的代码如何写。
<!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"> <jspang></jspang> </div> <script type="text/javascript"> var city={ template:`<div>Sichuan of China</div>` } var jspang = { template:`<div> <p> Panda from China!</p> <city></city> </div>`, components:{ "city":city } } var app=new Vue({ el:'#app', components:{ "jspang":jspang } }) </script> </body> </html>