Component 父子组件关系 · web前端

[TOC] # 简介在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件，这就需要一个父子组件关系。 # 构造器外部写局部注册组件上面上课我们都把局部组件的编写放到了构造器内部，如果组件代码量很大，会影响构造器的可读性，造成拖拉和错误。我们把组件编写的代码放到构造器外部或者说单独文件。我们需要先声明一个对象,对象里就是组件的内容 ~~~ <body> <div id="app"> <panda></panda> </div> </body> <script type="text/javascript"> var jdxia = { template: `<div style="color:red;">param from china!</div>`, }; var app = new Vue({ el: '#app', components: { "panda": jdxia } }); </script> ~~~ # 父子组件的嵌套我们先声明一个父组件，然后里边我们加入一个组件，我们来看这样的代码如何写 ~~~ <body> <div id="app"> <panda></panda> </div> </body> <script type="text/javascript"> var city = { template: `<div>四川来自china</div>` }; var jdxia = { template: `<div style="color:red;"> param from china! <city></city> </div>`, components: { "city": city } }; var app = new Vue({ el: '#app', components: { "panda": jdxia } }); </script> ~~~