vue之父子组件间的传值

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body >
    <div id = 'app'>
        <p>父组件的数据:{{a}}</p>
        <p>子组件传递给父组件的数据:{{childData}}</p>
        <input type="text" v-model="a">
        <hr>
        <br>
        <my-component v-bind:parentdata='a' @my-event="getData"></my-component>
    </div>
    
    <template id='child'>
        <div>
        <p>父组件传递给子组件的数据:{{parentdata}}</p>
        <p>子组件的数据: {{b}}</p>
        <input type="text" v-model="b">
        </div>
    </template>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                a:'',
                childData:'',
            },
            methods:{
                getData:function(val){
                    this.childData = val;
                }
            },
            components:{
                'my-component':{
                    template:'#child',
                    props:['parentdata'],
                    data:function(){
                        return {
                            b:'',
                        };
                    },
                    watch:{
                        b:function(){
                            this.$emit('my-event',this.b);
                        }
                    }
                }
            }

        });
        
    
    </script>
</body>
</html>
posted on 2018-01-27 17:14 kerryk 阅读(162) 评论(0) 收藏举报