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>