点击父组件里面的按钮可以控制子组件内的视图显示与隐藏
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>父组件控制子组件</title>
<style>
.show{
width: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抛出一个自定义组件标签属性。
父组件通过子组件的组件标签属性将需要的 数据传递过去。
子组件通过抛出的标签属性来调用这个值。
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
