今天学习vue,尝试写了个组件

原创 星辰杰 随笔 vue组件 247阅读 2017-12-07 21:27:34 举报

</head>
<body>
<div id="out">
<v-demo></v-demo>
</div>
<template id="demo">
<div>
<h1>父组件</h1>
<h2>接收子组件的数据----{{str}}</h2>
<hr />

            <v-child @to-parent='getdata'></v-child>
        </div>
    </template>

    <template id='child'>
        <div>
            <h2>子组件</h2>
            <input type="text" v-model='ipt'/>
            <button @click='send()'>发送给父组件</button>
        </div>
    </template>
</body>
<script type="text/javascript">
    var vm=new Vue({
        el:'#out',
        components:{
            "v-demo":{
                template:'#demo',
                data:function(){
                    return{
                        str:''
                    }
                },
                methods:{
                    getdata(msg){
                        this.str=msg
                    }
                },
                components:{
                    "v-child":{
                        template:'#child',
                        data:function(){
                            return{
                                ipt:''
                            }
                        },
                        methods:{
                            send(){
                                this.$emit('to-parent',this.ipt)
                            }
                        },
                        updated(){
                            this.$emit('to-parent',this.ipt)
                        }
                    }

                }
            }

        }
    })
</script>

</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复