这时，使用不同名称的slot就能轻易解决这个问题了。

<template> <div> <div v-bind:class="{ 'dialog-active': show }"> <div> <div> <span @click="close"></span> </div> <slot></slot> <slot></slot> <slot></slot> </div> </div> <div></div> </div> </template> <script src="js/vue.js"></script> <script> Vue.component('modal-dialog', { template: '#dialog-template', props: ['show'], methods: { close: function() { this.show = false } } }) new Vue({ el: '#app', data: { show: false }, methods: { openDialog: function() { this.show = true }, closeDialog: function() { this.show = false } } }) </script>

在定义modal-dialog组件的template时，我们使用了3个slot，它们的name特性分别是header、body和footer。

在<modal-dialog>标签下，分别为三个元素指定slot特性：

<div> <modal-dialog v-bind:show.sync="show"> <header slot="header"> <h1>提示信息</h1> </header> <div slot="body"> <p>你想在对话框中放什么内容都可以！</p> <p>你可以放一段文字，也可以放一些表单，或者是一些图片。</p> </div> <footer slot="footer"> <button @click="closeDialog">关闭</button> </footer> </modal-dialog> <button @click="openDialog">打开对话框</button> </div>

对话框的标题内容、主体内容、底部内容，完全由我们自定义，而且这些内容就是一些简单的HTML元素！

View Demo

如果需要定制对话框的样式，我们只需要在<modal-dialog>上追加一个v-bind指令，让它绑定一个class。

<modal-dialog v-bind:show.sync="show" v-bind:class="dialogClass">

然后修改一下Vue实例，在data选项中追加一个dialogClass属性，然后修改openDialog()方法：

new Vue({ el: '#app', data: { show: false, dialogClass: 'dialog-info' }, methods: { openDialog: function(dialogClass) { this.show = true this.dialogClass = dialogClass }, closeDialog: function() { this.show = false } } })

View Demo

虽然我们在modal-dialog组件中定义了3个slot，但是在页面中使用它时，并不用每次都指定这3个slot。
比如，有时候我们可能只需要header和body：

<modal-dialog v-bind:show.sync="show" v-bind:class="dialogClass"> <header slot="header"> <h1>提示信息</h1> </header> <div slot="body"> <p>你想在对话框中放什么内容都可以！</p> <p>你可以放一段文字，也可以放一些表单，或者是一些图片。</p> </div> </modal-dialog>

现在看到的对话框是没有底部的，只有标题和主体内容。

View Demo

多个slot同时使用的场景还有很多，例如：用户的注册、登录、找回密码等这些表单集合，也可以用一个组件来完成。

父子组件之间的访问

有时候我们需要父组件访问子组件，子组件访问父组件，或者是子组件访问根组件。
针对这几种情况，Vue.js都提供了相应的API：

父组件访问子组件：使用$children或$refs

子组件访问父组件：使用$parent

子组件访问根组件：使用$root

$children示例

下面这段代码定义了3个组件：父组件parent-component，两个子组件child-component1和child-component2。

在父组件中，通过this.$children可以访问子组件。
this.$children是一个数组，它包含所有子组件的实例。

<div> <parent-component></parent-component> </div> <template> <child-component1></child-component1> <child-component2></child-component2> <button v-on:click="showChildComponentData">显示子组件的数据</button> </template> <template> <h2>This is child component 1</h2> </template> <template> <h2>This is child component 2</h2> </template> <script src="js/vue.js"></script> <script> Vue.component('parent-component', { template: '#parent-component', components: { 'child-component1': { template: '#child-component1', data: function() { return { msg: 'child component 111111' } } }, 'child-component2': { template: '#child-component2', data: function() { return { msg: 'child component 222222' } } } }, methods: { showChildComponentData: function() { for (var i = 0; i < this.$children.length; i++) { alert(this.$children[i].msg) } } } }) new Vue({ el: '#app' }) </script>

View Demo

$refs示例