点击父组件里面的按钮可以控制子组件内的视图显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父组件控制子组件</title>
<style>
.show{
100px;
height: 100px;
text-align: center;
font-size: 20px;
line-height: 100px;
background-color: rgba(0,0,136,0.36);
}
</style>
</head>
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
father
<button @click="fhide">show/hide</button>
{{hidef}}
<hr>
<son :test="hidef"></son>
</div>
</template>
<template id="son">
<div>
<div class="show" v-if="test">son{{test}}</div>
<!--这里的v-if的值test是由父组件传给子组件的-->
<button @click="shide">显示/隐藏</button>
</div>
</template>
<script src="vue.js"></script>
<script>
Vue.component('father',{
template:"#father",
data(){
return{
hidef:true
}
},
methods:{
fhide(){
this.hidef=!this.hidef;
}
}
})
Vue.component('son',{
template:"#son",
data(){
return{
hides:true
}
},
methods:{
shide(){
this.hides=!this.hides;
}
},
props:['test']
})
new Vue({
el:"#app"
});
</script>
</body>
</html>
由父到子
子组件通过props抛出一个自定义组件标签属性。
父组件通过子组件的组件标签属性将需要的 数据传递过去。
子组件通过抛出的标签属性来调用这个值。