vuejs 检视组件结构

我们可以使用vue-devtools很方便检验页面的组件结构，包括组件的列表，嵌套关系，以及每个组件的内部数据成员的值。为此，我们做一个简单的布局结构，界面如下：

其中嵌套了一个header和一个content组件，content组件内还有c1，c2两个组件嵌套其中。嵌套结构为

->ROOT
  ->header
  ->content
     ->c1
     ->c2

代码：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <hdr></hdr>
  <ctnt><c1></c1><c2></c2></ctnt>
</div>
<script>
var hdr = {
  'template':'<div>{{title}}</div>',
  data () {
    return {title: 'header'} 
  }
}
var ctnt = {
  'template':'<div>{{title}}<slot></slot></div>',
  data () {
    return {title: ''} 
  }
}
var c1 = {
  'template':'<div class="c1">{{title}}</div>',
  data () {
    return {title: 'c1'} 
  }
}
var c2 = {
  'template':'<div class="c2">{{title}}</div>',
  data () {
    return {title: 'c2'} 
  }
}
  
var app = new Vue({
  components:{
    hdr,ctnt,c1,c2
   }}
)
app.$mount('#app')
</script>
<style type="text/css">
  .c1{
    border: solid 1px blue ;
    float: left;
  }
  .c2{
    border: solid 1px green;
    float: left;
  }
</style>

可以使用chrome直接打开文件，并记得在插件内配置vue-devtools，允许它访问文件网址。随后打开Chrome devtools，点开vue面板。可以看到

1. 组件的树形结构在左边展示

2. 点击此树形结构的组件项目，可以在右侧看到组件的数据成员值，且在用户界面上，对应的组件会被加亮。

vue-devtools检视组件的能力，查看vue组件内部，从而可以帮助我们调试程序

作者：刘传君

创建过产品，创过业。好读书，求甚解。
可以通过 1000copy#gmail.com 联系到我

出品

bootstrap小书 https://www.gitbook.com/book/...
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...