废话不多说上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue父传子</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<navbar myname="home" :myshow="false"></navbar>
<navbar myname="list" :myshow="true"></navbar>
<navbar :myname="parentname" :myshow="false"></navbar>
</div>
<script>
Vue.component('navbar', {
template: '<div><button>返回</button>{{myname}}<button v-show="myshow">首页</button></div>',
/*props: ['myname','myshow']//接受父组件传来的属性*/
props:{
myname:String,
myshow:Boolean
}
})
new Vue({
el:"#box",
data:{
parentname:'父组件'
}
})
</script>
</body>
</html>
效果图