vue-8 父子组件相互传值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="https://vuejs.org/js/vue.js"></script>
        <script>
            /*
                父组件 通过datacont 传了值   属性名就是datacont
                子组件通过props里面的值 来定义属性名 进行接受

                子传父 :示例中 通过button的click触发了事件。
                事件中通过this.$emit触发父组件的自定义事件,定义事件名和事件的值。
                传递几个值,后面就要定义几个参数进行接收

                父组件要在传递事件的子组件上 定义和传递事件名一样的属性名进行监听。也就是示例中的@baba = 'reserve'
                当有事件传过来的时候,就触发了reserve事件。传递过来几个事件值 reserve事件就要接收几个值。
                然后就可以使用子组件传递过来的值

            */
            var zizujian = {
                template:`
                    <div>
                        我是子组件{{datacont}}
                        <button @click="btnclick">点击子传父</button>
                    </div>
                `,
                props:['datacont'],
                methods:{
                    btnclick(){
                        this.$emit('baba','儿子给父亲传的东西','儿子给父亲传的东西2');
                    }
                }

            }

            var fuzujian = {
                template:`
                    <div>
                    我是父组件{{msg}}{{msg2}}
                    <zizujian datacont="啊啊啊" @baba = 'reserve' ></zizujian>
                    </div>
                `,
                data(){
                    return{
                        msg:'',
                        msg2:''
                    }
                },
                components:{
                    zizujian
                },
                methods:{
                    reserve(val,val2){
                        this.msg = val
                        this.msg2 = val2
                    }
                }

            }


            new Vue({
                el:"#app",
                components:{
                    fuzujian
                },
                template:`
                    <div>
                        <fuzujian>
                            <div slot="a">第一个dom</div>
                            <div slot="b">第二个dom</div>
                            <div slot="c">第三个dom</div>
                        </fuzujian>
                    </div>
                `,
                data:function(){
                    return {

                    }
                }


            })
        </script>
    </body>
</html>
发表评论 / Comment

用心评论~