- i. pass value Sons assembly (props down, events up)
- . ii attribute validation The props: {name:} Number The
Number The, String, Boolean, the Array, Object, Function, null (no limitation type)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style>
.navbar {
background: red;
}
</style>
</head>
<body>
<div id="box">
<!--myname为自定义属性，属性值会被当成字符串对待，需要动态绑定-->
<navbar myname="home" :myshow="false"></navbar>
<navbar myname="list" :myshow="true"></navbar>
<navbar myname="parentname" :myshow="true"></navbar>
<!--动态绑定传值-->
<navbar :myname="parentname" :myshow="true"></navbar>
</div>
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("navbar", {
template: `<div>
<button>返回</button>
navbar -- {{myname}}
<button v-show="myshow">首页</button>
</div>`,
props: {
myname: String,
myshow: Boolean
}
})
new Vue({
el: "#box",
data: {
parentname: "父组件的状态"
}
})
</script>
</body>
</html>
