Vue简单组件使用

Narbar.vue组件

<template>
    <div>
        <button>left</button>
        navbar--{{name}}
        <button v-show="myright">right</button>
        <slot></slot>
    </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    myright: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      msg: 'aaaa'
    }
  }
}
</script>

在App.vue中使用组件，可以全局注册或者局部注册组件

<template>
  <div id="app">
  	//第三步使用组件
    <navbar name="home" :myright="true">
      <div>213414444444444444</div>
    </navbar>
  </div>
</template>

<script>
// ES6导出规范
//第一步
import navbar from './components/Navbar'
// import siderbar from '@/components/Siderbar'
// import hzxxb from './components/Hzxxb'
// import testurl from './components/Testurl'
// import Vue from 'vue'

// 全局注册 局部注册
// eslint-disable-next-line vue/multi-word-component-names
// Vue.component('navbar', navbar)

// ES6导出模式
export default {
  data () {
    return {
      dataList: ['111', '2222', '333']

    }
  },
  // 局部注册
  components: {
  	//第二步，注册组件
    navbar,
    // siderbar,
    // hzxxb,
    // testurl
  }

}
</script>

<style>
.kerwinactive{
  background: red;
}
#routerId{
  height: 500px;
  border: 10px solid;
}
</style>