### 组件关系
* * * * *
组件的相互引用只需要使用对应的文件路径就行
>[info] 模块引用需要定义完整的路径哦
| 路径 | 含义 |
| --- | --- |
| ../a | 父文件夹下的a 组件 |
| a | 当前文件夹下的a组件 |
| a/b | 当前文件夹下的a文件夹下的b组件 |
| /a/b | 根文件夹下的a文件夹下的b组件 |
### 组件引用
* * * * *
一个组件需要引用其他组件需要在define 时进行依赖,然后在template就可以进行使用了
/a/b/c.html 对应的组件名为 a_b_c
/a/b/c_d.html 对应的组件名为 a_b_c_d
使用
~~~
<template>
<div>
<a_b_c></a_b_c>
</div>
</template>
//先定义依赖然后使用
Rap.define(['/a/b/c'],{
data: function(){
return{
}
},
methods: {
}
});
~~~
### layout 父布局
* * * * *
子组件将会在父组件childView中进行显示
如上面定义的组件的父组件为 ../parent 对应定义的文件在上一目录下的parent. html 文件;模板文件中有
~~~
<component v-bind:is="childView">
</component>
~~~
文件完整定义为
~~~
<template>
<div>
<div class="mag-nav-bar">
<a href='#mod/test1'>tab1</a>
<a href='#mod/test2'>tab2</a>
</div>
<keep-alive>
<component v-bind:is="childView">
</component>
</keep-alive>
</div>
</template>
<script>
Rap.define({
data: function(){
return{
}
},
methods: {
}
});
</script>
~~~