如何用父组件里面的方法修改子组件里面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回答

Dreamer1017

2018-11-27

var p = {
            props:['seen']
            template:'<p v-if="seen">阿瑟反攻输入法</p>'
        }
<myp :seen="seen"></myp>


  1.  父组件通过v-bind(简写为 “:”)来给子组件传值

  2. 子组件通过props来接受父组件的传过来的值

2
2
慕码人5975274
已经正确了,非常感谢老师和这位同学
2018-11-29
共2条回复

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代,企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

查看课程