vue-7 slot的应用 以及父子组件的相互引用

<!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>
            /*
                slot插槽
                就是给模版的dom留下坑位
                如果不给slot name值 就会输出组件中的所有dom
                如果给slot name值,那么只会输出dom的slot的属性值和 name值相同的dom

                如果在组件中引用了另一个组件,那么被引用的就是子组件,引用别人的就是父组件。
                可以通过this 在父组件中获取子组件的节点,也可以在子组件中获取父组件的节点。
                节点中包括所有数据  例如data值等
            */
            var zizujian = {
                template:`
                    <div>
                        我是子组件
                    </div>
                `,
                data(){
                    return {
                        msg : 'hello'
                    }
                },
                created(){
                    console.log(this.$parent)
                }

            }
            //父组件
            var fuzujian = {
                template:`
                    <div>
                    我是父组件
                    <slot name="b"></slot>
                    <slot name="c"></slot>
                    <zizujian ref="zi"></zizujian>
                    </div>
                `,
                components:{
                    zizujian
                },
                mounted(){
                    console.log(this.$refs.zi)
                }
            }


            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

用心评论~