vue 组件 多个template

1.多个单文件组件使用

在project目录下创建components文件夹，然后将所有子组件放入components文件夹下

 

1、多组件嵌套使用

Child1.vue 

<template>
    <div>子组件1</div>
</template>

<script>
// export default {

// }
</script>

<style></style>

 

Child2.vue 

<template>
    <div>子组件2</div>
</template>

<script>
// export default {

// }
</script>

<style></style>

 

App.vue

<template>
    <div>
        单文件组件
        <!-- 调用子组件 -->
        <Child1></Child1>
        <Child2></Child2>
    </div>

</template>


<script>
    //导入components目录下的子文件 Child1为指定的组件名，可以任意命名，不一定按照文件名
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'

export default {
    // 将子组件添加到App.vue中
    components:{
        Child1,
        Child2,

    }
}
</script>

<style></style>

 

2、多组件路由使用

使用路由形式将多个单文件组件组合在一起

1. 定义路由目录和路由文件

mkdir router
touch router.js

1. 编写路由文件router.js　　　　　　

import Vue from 'vue'
// 导入路由插件
import Router from 'vue-router'
import Child1 from '../components/Child1.vue'
import Child2 from '../components/Child2.vue'
// 在vue中使用插件
Vue.use(Router)
export default new Router({
    // 定义匹配规则
   routes:[
       {
           path:'/',  // 匹配根路径／，加载Chiled1中的内容
           component:Child1
       },
       {
           path:'/child2',
           component:Child2
       }
   ]
})

 在main.js中使用路由　　　　　　

import Vue from 'vue'
import App from './App.vue'
//导入定义好的路由
import router from './router/router.js'

new Vue({
    el:'#app',
    router,  //使用路由
    render:function(creater){
        return creater(App)
    }
})

 在App.vue中指定路由标签

<template>
    <div>
        单文件组件
         <!-- 记载路由标签 -->
        <router-view></router-view>
    </div>

</template>

<script></script>

<style></style>

2.Element-ui

单文件组件就像是一个个封装好的页面样板，我们可一把这些样板组合在一起形成一个完整的页面。就像QQ空间装扮一样，将个个样板放入QQ空间页面中组成自己风格的页面。而Element-ui就将我们需要的样式封装成单文件组件，我们可以直接集成到我们的项目中。

1. 在main.js中将emelent-ui引入到项目中

import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
// 引入ElementUI
import ElementUI from 'element-ui'
// 引入css
import 'element-ui/lib/theme-chalk/index.css'
// 使用ElementUI
Vue.use(ElementUI)

new Vue({
    el:'#app',
    router,
    render:function(creater){
        return creater(App)
    }
})

1. 在子组件中使用element-ui的代码,

<template>
<div>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-slider v-model="value1"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">自定义初始值</span>
    <el-slider v-model="value2"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">隐藏 Tooltip</span>
    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">格式化 Tooltip</span>
    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">禁用</span>
    <el-slider v-model="value5" disabled></el-slider>
  </div>
</div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: 50,
        value3: 36,
        value4: 48,
        value5: 42
      }
    },
    methods: {
      formatTooltip(val) {
        return val / 100;
      }
    }
  }
</script>

Emelent的其他效果样式可以参考官方网站：

http://element-cn.eleme.io/#/zh-CN/component/progress