四、使用slot 分发内容
1、什么是sloat
当需要让组件组合使用,混合父组件的内容与子组件的模板时,就会用到slot,这个过程叫做内容分发。
- 组件不知道它的挂载点会有什么内容。挂载点的内容是由
- 的父组件决定的。 组件很可能有它自己的模板。
props传递数据、events触发事件和slot内容分发就构成了Vue组件的3个API来源,再复杂的组件也是由这3部分构成。
2、作用域
<child-component>
{{message}}
</child-component>
这里的message
就是一个slot
,但是它绑定的是父组件的数据,而不是组件<child-component>
的数据。
父组件模板的内容是在父组件作用域内编译,子组件模板的内容是在子组件作用域内编译。
<div id="app">
<child-component v-modle="showChild"></child-component>
</div>
Vue.component('child-component', {
template: `<div>子组件1</div>`,
});
var app = new Vue({
el: '#app',
data: {
showChild: true
}
});
这里的状态showChild
绑定的是父组件的数据。
在子组件上绑定数据:
<div id="app">
<child-component></child-component>
</div>
Vue.component('child-component', {
template: `<div v-model="showChild">子组件</div>`,
data() {
return {
showChild: true
}
}
});
var app = new Vue({
el: '#app',
});
因此,slot
分发的内容,作用域是在父组件上。
3、slot 用法
单个slot
在子组件内使用特殊的元素就可以为这个组件开启一个slot(插槽),在父组件模板里,插入在子组件标签内的所有内容将替代子组件的标签及它的内容。
<div id="app">
<child-component>
<p>分发的内容</p>
<p>更多分发的内容</p>
</child-component>
</div>
Vue.component('child-component', {
template: `
<div>
<slot>
<p>如果没有父组件插入内容,我将作为默认出现。</p>
</slot>
</div>
`,
});
var app = new Vue({
el: '#app',
});
子组件child-component
的模板内定义了一个<slot>
元素,并且用一个<p>
作为默认的内容,在父组件没有使用slot
时,会渲染这段默认的文本;如果写入了slot
,就会替换整个。
子组件内的备用内容,它的作用域是子组件本身。
具名Slot
给<slot>
元素指定一个name
后可以分发多个内容,具名slot
可以与单个slot
共存。
<div id="app">
<child-component>
<h2 slot="header">标题</h2>
<p>正文的内容</p>
<p>更多正文的内容</p>
<div slot="footer">底部信息</div>
</child-component>
</div>
Vue.component('child-component', {
template: `
<div class="container">
<div class="header">
<slot name="header"></slot>
</div>
<div class="main">
<slot></slot>
</div>
<div class="footer">
<slot name="footer"></slot>
</div>
</div>
`,
});
var app = new Vue({
el: '#app',
});
子组件内声明了3个<slot>
元素,其中在<div class="main">
内的<slot>
没有使用name
特性,它将作为默认slot
出现,父组件没有使用slot
特性的元素与内容都将出现在这里。
如果没有指定默认的匿名slot
,父组件内多余的内容都将被抛弃。
在组合使用组件时,内容分发API至关重要。
4、作用域插槽
作用域插槽是一种特殊的slot
,使用一个可以复用的模板替换已渲染元素。
<div id="app">
<child-component>
<template scope="props">
<p>来自父组件的内容</p>
<p>{{props.msg}}</p>
</template>
</child-component>
</div>
Vue.component('child-component', {
template: `
<div class="container">
<slot msg="来自子组件的内容"></slot>
</div>
`,
});
var app = new Vue({
el: '#app',
});
子组件的模板,在<slot>
元素上有一个类似props
传递数据给组件的写法msg="xxx"
,将数据传递到插槽。
父组件中使用了<template>
元素,而且拥有一个scope="props"
的特性,这里的props
是一个临时变量。
template
内可以通过临时变量props
访问来自子组件插槽的数据msg
。
作用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每一项。
<div id="app">
<my-list :book="books">
<!--作用域插槽也可以是具名的Slot-->
<template slot="book" scope="props">
<li>{{props.bookName}}</li>
</template>
</my-list>
</div>
Vue.component('my-list', {
props: {
books: {
type: Array,
default: function () {
return [];
}
}
},
template: `
<ul>
<slot name="book" v-for="book in books" :book-name="book.name"></slot>
</ul>
`,
});
子组件my-list
接收一个来自父级的prop
数组books
,并且将它在name
为book的slot
上使用v-for
指令循环,同时暴露一个变量bookName
。
作用域插槽的使用场景是既可以复用子组件的slot
,又可以使slot
内容不一致。
5、访问slot
Vue 2.x提供了用来访问被slot
分发的内容的方法$slots
。
<div id="app">
<child-component>
<h2 slot="header">标题</h2>
<p>正文的内容</p>
<p>更多正文的内容</p>
<div slot="footer">底部信息</div>
</child-component>
</div>
Vue.component('child-component', {
template: `
<div class="container">
<div class="header">
<slot name="header"></slot>
</div>
<div class="main">
<slot></slot>
</div>
<div class="footer">
<slot name="footer"></slot>
</div>
</div>
`,
mounted: function () {
var header = this.$slots.header;
var main = this.$slots.default;
var footer = this.$slots.footer;
console.log(footer);
console.log(footer[0].elm.innerHTML);
}
});
var app = new Vue({
el: '#app',
});
通过$slots
可以访问某个具名slot,this.$slots.default
包括了所有没有被包含在具名slot
中的节点。
五、组件高级用法
1、递归组件
给组件设置name
选项,组件在它的模板内可以递归地调用自己。
<div id="app">
<child-component :count="1"></child-component>
</div>
Vue.component('child-component', {
name: 'child-component',
props: {
count: {
type: Number,
default: 1
}
},
template: `
<div class="child">
<child-component :count="count+1" v-if="count<3"></child-component>
</div>
`,
});
组件递归使用可以用来开发一些具有未知层级关机的独立组件,比如级联选择器和树形控件等。
2、内联模板
组件的模板一般都是在template
选项内定义的,Vue
提供了一个内联模板的功能,在使用组件时,给组件标签使用inline-template
特性,组件就会把它的内容当做模板,而不是把它当内容分发,这让模板更灵活。
<div id="app">
<child-component inline-template>
<div>
<h2>在父组件中定义子组件的模板</h2>
<p>{{message}}</p>
<p>{{msg}}</p>
</div>
</child-component>
</div>
Vue.component('child-component', {
data() {
return {
msg: '在子组件中声明的数据'
}
}
});
var app = new Vue({
el: '#app',
data: {
message: '在父组件中声明的数据'
}
});
在父组件中声明的数据message
和子组件中声明的数据msg
,两个都可以渲染(如果同名,优先使用子组件的数据)。这是内联模板的缺点,就是作用域比较难理解,如果不是非常特殊的场景,建议不要轻易使用内联模板。
3、动态组件
Vue.js提供了一个特殊的元素<component>
用来动态地挂载不同的组件,使用is
特性来选择要挂载的组件。
<div id="app">
<button @click="handleChangeView('A')">切换到A</button>
<button @click="handleChangeView('B')">切换到B</button>
<button @click="handleChangeView('C')">切换到C</button>
<component :is="currentView"></component>
</div>
var app = new Vue({
el: '#app',
data: {
currentView: 'comA'
},
components: {
comA: {
template: `<div>组件A</div>`
},
comB: {
template: `<div>组件B</div>`
},
comC: {
template: `<div>组件C</div>`
},
},
methods: {
handleChangeView: function (component) {
this.currentView = 'com' + component
}
}
});
可以直接绑定在组件对象上:
<div id="app">
<component :is="currentView"></component>
</div>
var Home = {
template: `<p>Welcome home!</p>`
};
var app = new Vue({
el: '#app',
data: {
currentView: Home
}
});
4、异步组件
Vue.js允许将组件定义为一个工厂函数,动态地解析组件。
Vue.js只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。
<div id="app">
<child-component></child-component>
</div>
Vue.component('child-component', function (resolve, reject) {
window.setTimeout(function () {
resolve({
template: `<div>我是异步渲染的!</div>`
})
}, 1000)
});
var app = new Vue({
el: '#app',
});
工厂函数接收一个resolve
回调,在收到从服务器下载的组件定义时调用。也可以调用reject(reason)
指示加载失败。
6 、其他
1、$nextTick
异步更新队列
Vue在观察到数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一个事件循环中发生的所有数据变化。在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。然后,在一下个事件循环tick
中,Vue刷新队列并执行实际(已去重的)工作。
Vue会根据当前浏览器环境优先使用原生的Promise.then
和MutationObserver
,如果都不支持,就会采用setTimeout
代替。
$nextTick
就是用来确定什么时候DOM更新已经完成。
<div id="app">
<div id="div" v-if="showDiv">这是一段文本</div>
<button @click="getText">获取div内容</button>
</div>
var app = new Vue({
el: '#app',
data: {
showDiv: false
},
methods: {
getText: function () {
this.showDiv = true;
this.$nextTick(function () {
var text = document.getElementById('div');
console.log(text.innerHTML);
})
}
}
});
2、X-Templates
Vue提供了另一种定义模板的方式,在
<div id="app">
<my-component></my-component>
<script type="text/x-template" id="my-component">
<div>这是组件的内容</div>
</script>
</div>
Vue.component('my-component', {
template: `#my-component`,
});
var app = new Vue({
el: '#app',
});
3、手动挂载实例
在一些非常特殊的情况下,需要动态地创建Vue实例,Vue提供了Vue.extend
和$mount
两个方法来手动挂载一个实例。
Vue.extend是基础Vue构造器,创建一个“子类”,参数是一个包含组件选项的对象。
如果Vue实例在实例化时没有收到el
选项,它就处于“未挂载”状态,没有关联的DOM元素。可以使用$mount
手动地挂载一个未挂载的实例。这个方法返回实例自身,因而可以链式调用其他实例方法。
<div id="app"></div>
var MyComponent = Vue.extend({
template: `<div>Hello {{name}}</div>`,
data() {
return {
name: 'Andy'
}
}
});
new MyComponent().$mount('#app');
除了以上写法外,还有两种写法:
new MyComponent().$mount("#app");
new MyComponent({
el: '#app'
})
手动挂载实例(组件)是一种比较极端的高级用法,在业务中几乎用不到,只在开发一些复杂的独立组件时可能会使用。