自定义组件

1  在main.js 注册层全局组件

  import NavBar from './components/common/NavBar';

   Vue.component(NavBar.name,NavBar)

 

2 编写自定义组件 并使用

<template>

  <div>

      <mt-header :title="title">

        <div @click="goback" slot="left">

            <mt-button icon="back">返回</mt-button>

        </div>

        </mt-header>

     

   </div>

</template>

<script>

export default {

    name:"nav-bar",

    props:['title'],

     methods:{

       goback (){

           this.$router.go(-1);

       }

   },

    data(){

        return{

        }

    }

}

</script>

<style>

</style>

 

3调用 自定义组件

     

 <nav-bar title="图文详情"/>