Vue2知识点回顾（组件篇2）

xiaok1988
2026年4月5日2026年4月7日
未分类

知识点和代码demo来自《Vue.js实战》

接上一篇，组件间的通信，可以采取如下几种方式：总线法、父链、子组件索引。

总线法：定义一个全局的Vue对象，bus, 用bus来做$emit和$on.

父链：子组件通过$parent找到父组件的引用，父组件通过$children找到子组件的引用，相互暴露内部状态。

子组件索引：子组件定义ref属性给自己命名，父组件用this.$refs.组件名来引用子组件。

使用slot分发内容：transclusion.

slot的使用，有一个前置概念，编译的作用域。父组件的模板内容在父组件里编译，子组件的模版内容在子组件里编译。slot分发的内容，是在父组件的作用域里编译的。

单个slot:

子组件里有一个slot元素，父组件插入在子组件标签里的所有内容替换子组件的<slot>标签及内容。

完整的代码如下：

<html>
    <head>
        <title>1</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">            
            <my-component>
                <p>分发的内容1</p>
                <p>分发的内容2</p>
            </my-component>            
        </div>        
    </body>
    <script>
            Vue.component('my-component', {
                template: '<div><slot>I am placeholder</slot></div>',
            });
            var app = new Vue({
                el: '#app'
            })
        </script>
</html>

具名slot:

代码如下

<html>
    <head>
        <title>1</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">            
            <my-component>
                <h2 slot="header" >标题</h2>  
                <p>分发的内容1</p>
                <p>分发的内容2</p>
                <div slot="footer">底部</div>
            </my-component>            
        </div>        
    </body>
    <script>
            Vue.component('my-component', {
                template: '<div>\
                    <div class="header">\
                        <slot name="header"></slot>\
                    </div>\
                    <div class="main">\
                        <slot ></slot>\
                    </div>\
                    <div class="footer">\
                        <slot name="header"></slot>\
                    </div>\
                </div>'
            });
            var app = new Vue({
                el: '#app'
            })
        </script>
</html>

上例中，main下的slot没有name属性（匿名slot），那么父元素中，没有定义slot属性的内容都会出现在这个slot里。

作用域slot:

<html>
    <head>
        <title>1</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">            
            <my-component>
               <template scope="props">
                <h2>标题</h2>
                <p>来自父组件的内容</p>
                <p>{{props.msg}}</p>
               </template>
            </my-component>            
        </div>        
    </body>
    <script>
            Vue.component('my-component', {
                template: '<div>\
                    <slot msg="来自子组件的内容"></slot>\
                </div>'
            });
            var app = new Vue({
                el: '#app'
            })
        </script>
</html>

这个例子里，props是一个临时变量，用于将数据从子组件传到插槽里。

this.$slots可以用来在子组件中获取插槽。

专注前端、图形学

Vue2知识点回顾（组件篇2）