如何用父组件里面的方法修改子组件里面p元素的显示隐藏,我这种为什么不可以
来源:2-9 章节小结
慕码人5975274
2018-11-27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework_CapterOne</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" @click="handleButtonClick">显示/隐藏</button>
<myp></myp>
</div>
<script>
var p = {
template:'<p v-if="seen">阿瑟反攻输入法</p>'
}
var vue = new Vue({
el:"#app",
components:{
myp:p
},
data:{
seen:false
},
methods:{
handleButtonClick:function(){
if(this.seen){
this.seen = false;
}else{
this.seen = true;
}
}
}
})
</script>
</body>
</html>
写回答
1回答
-
var p = { props:['seen'] template:'<p v-if="seen">阿瑟反攻输入法</p>' }
<myp :seen="seen"></myp>
父组件通过v-bind(简写为 “:”)来给子组件传值
子组件通过props来接受父组件的传过来的值
222018-11-29
相似问题