|
1. 组件 目录结构如图，components文件夹下都是组件 
App.vue是主页面 a. 如何编写并且调用组件 组件头部导航Header <template>
<ul>
<li v-for="navData in navData">
<router-link :to="navData.path">{{navData.name}}</router-link>
</li>
</ul>
</template>
<script>
export default {
name: 'HeaderDiv',
data () {
return {
msg: 'Welcome to Your Vue.js App',
navData: [
{
name: '首页',
path: '/'
},
{
name: '验证码',
path: '/code'
}
]
}
}
}
</script> 父页面app.vue调用 <template>
<div id="app">
<HeaderNav ></HeaderNav>
<router-view :logo="logoTest"></router-view>
</div>
</template>
<script>
import HeaderNav from '@/components/Header'
export default {
name: 'app',
data () {
return {
logoTest: '测试Logo'
}
},
components: {
HeaderNav: HeaderNav
}
}
</script> 可以看到在script中，先import header这个组件，然后在components参数中赋值，最后在template中调用HeaderNav标签就能在父组件中调用子组件。 2. 路由 还是先从子组件开始 <template>
<div class="code-wrap">
<h2>4.18环境-测试环境-pre环境验证码获取-{{logo}}</h2>
<input type="radio" checked name="itype" id="itype1" value="dev"><label for="itype1">4.18环境</label><br>
<input type="radio" name="itype" id="itype2" value="test"><label for="itype2">测试环境</label><br>
<input type="radio" name="itype" id="itype3" value="pre"><label for="itype3">pre环境</label><br>
<input id="J_btn_code" type="button" v-on:click="getCode" value="获取短信验证码"><br>
<div id="J_txt" style="width: 600px;height: 400px;border:1px solid #000;"></div>
</div>
</template>
<script>
export default {
name: 'Code',
data () {
return {
}
},
props: ['logo']
}
</script> 通过router的js导入子组件，定义router的path和router名称 import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Code from '@/components/Code'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/code',
name: 'Code',
component: Code
}
]
}) 在主页面APP.vue的template中生成<router-view :logo="logoTest"></router-view>就能使用路由。
|
