Vue学习笔记(八) 组件进阶
一、插槽
（1）插槽内容javascript
像 HTML 元素同样，咱们经常须要给组件传递内容html
好比在下面的例子中，咱们给自定义组件 prompt-info 传入 出错啦 的文本vue
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<prompt-info>出错啦</prompt-info>
</div>
<script>
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
</div>
`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
可是，结果并不像咱们所想的，出错啦 的提示信息没有显示出来，这时候咱们就可使用 <slot> 解决这个问题java
<slot> 就是插槽，也就是说咱们须要先在组件中留下一个位置，而后才能在使用的时候把传入的内容放进去webpack
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
<slot></slot>
</div>
`
})
咱们还能够为插槽提供默认内容，可是它仅仅会在没有提供内容的时候显示出来web
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
<slot>很差意思</slot>
</div>
`
})
在定义好插槽后就能够正常显示传入的内容啦，事实上咱们不只能够传入简单的文本，还能够传入任何模板代码npm
<div id="app">
<prompt-info>
<span>出错啦</span>
<p>请稍后再试</p>
</prompt-info>
</div>
（2）插槽数据缓存
考虑一个问题，上面咱们传入的模板代码中是没有包含数据的，假如如今咱们使用数据会发生什么呢？服务器
这里面还有必定的讲究网络
- 数据在父级模板中定义，在父级模板中使用：例以下面的 msg
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<prompt-info>{{ msg }}</prompt-info>
</div>
<script>
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
<slot></slot>
</div>
`
})
new Vue({
el: '#app',
data: {
msg: '服务器离家出走啦 T_T'
}
})
</script>
</body>
</html>
- 数据在子模板中定义，在子模板中使用：例以下面的 info
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<prompt-info></prompt-info>
</div>
<script>
Vue.component('prompt-info', {
data: function () {
return {
info: '很差意思，请从新再试'
}
},
template: `
<div>
<h3>提示信息</h3>
<slot>{{ info }}</slot>
</div>
`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
- 数据在子模板中定义，在父级模板中使用
此次没有这么简单，咱们先来看一份简单的代码：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<prompt-info>{{ info }}</prompt-info>
</div>
<script>
Vue.component('prompt-info', {
data: function () {
return {
info: '很差意思，请从新再试'
}
},
template: `
<div>
<h3>提示信息</h3>
<slot></slot>
</div>
`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
实际上，这份代码不会被正确编译，控制台会输出错误信息：info is not defined
这是由于 父级模板里的全部内容都是在父级做用域中编译的，子模板里的全部内容都是在子做用域中编译的
若是咱们但愿让插槽内容访问子组件数据，能够怎么作呢？
首先，咱们须要在 <slot> 元素上使用 v-bind 指令绑定数据（绑定在 <slot> 元素上的特性称为 插槽 prop）
而后，咱们就能够在组件上使用 v-slot 指令获取并使用 插槽 prop
（注意，在这里使用 v-slot 的语法为 v-slot='slotProps'）
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<prompt-info v-slot='slotProps'>{{ slotProps.info }}</prompt-info>
</div>
<script>
Vue.component('prompt-info', {
data: function () {
return {
defaultInfo: '很差意思，请从新再试',
info: '服务器离家出走啦 T_T'
}
},
template: `
<div>
<h3>提示信息</h3>
<slot v-bind:info='info'>{{ defaultInfo }}</slot>
</div>
`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
（3）具名插槽
好，下面咱们再来考虑另外一个问题，当咱们须要使用多个插槽时，应该怎么对它们进行区分呢？
答案是在定义的时候使用 name 特性为插槽命名，而后在使用的时候仍是使用 v-slot 指令指定插槽
（注意，在这里使用 v-slot 的语法为 v-slot:slotName，与上面的语法并不冲突）
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<prompt-info>
<template v-slot:header>
<p>服务离家出走啦</p>
</template>
<!-- 没有使用 v-slot 指令指定的元素默认放在 default 插槽 -->
<template>
<p>请稍后再试</p>
</template>
<template v-slot:footer>
<p>很差意思</p>
</template>
</prompt-info>
</div>
<script>
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
<slot name="header"></slot>
<!-- 没有使用 name 特性命名的插槽默认带有名字 default -->
<slot></slot>
<slot name="footer"></slot>
</div>
`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
- 具名插槽的缩写：
同 v-on 和 v-bind 指令同样，Vue 也为 v-slot 指令提供了缩写
<!-- 完整语法 --> <template v-slot:header>...</template> <!-- 缩写 --> <template #header>...</template>
- 独占默认插槽的缩写：
当只有一个默认插槽时，咱们能够直接把 v-slot 用在组件上：
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
<slot></slot>
</div>
`
})
<prompt-info v-slot:default="slotProps"></prompt-info>
可是只要出现多个插槽，请始终为全部的插槽使用完整的基于 <template> 的语法：
Vue.component('prompt-info', {
template: `
<div>
<h3>提示信息</h3>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
`
})
<prompt-info v-slot:default="slotProps">
<template v-slot:header="slotProps">
<!-- 内容 -->
</template>
<template v-slot:default="slotProps">
<!-- 内容 -->
</template>
<template v-slot:footer="slotProps">
<!-- 内容 -->
</template>
</prompt-info>
二、动态组件 & 异步组件
（1）动态组件
动态组件其实就是动态切换组件，咱们能够经过 <component> 元素配合 is 特性实现，来看一个简单的例子
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button v-for="tab in tabs" v-on:click="currentTab = tab">{{ tab }}</button>
<component v-bind:is="currentTabComponent"></component>
</div>
<script>
Vue.component('tab-home', {
template: '<div>Home component</div>'
})
Vue.component('tab-post', {
template: '<div>Posts component</div>'
})
Vue.component('tab-archive', {
template: '<div>Archive component</div>'
})
new Vue({
el: '#app',
data: {
currentTab: 'Home',
tabs: ['Home', 'Post', 'Archive']
},
computed: {
currentTabComponent: function () {
return 'tab-' + this.currentTab.toLowerCase()
}
}
})
</script>
</body>
</html>
当每次切换组件时，Vue 都会建立一个 currentTabComponent 实例
可是，有的时候咱们却但愿可以保持组件的状态，以免反复重渲染致使的性能问题
这时候咱们能够经过 <keep-alive> 元素实现，包裹在该元素内的组件在第一次建立时会被缓存起来
<keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
（2）异步组件
异步组件其实就是异步加载组件，咱们能够经过工厂函数定义组件，一个简单的例子以下
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>Hello</p>
<my-component></my-component>
</div>
<script>
Vue.component('my-component', function (resolve, reject) {
// 这里使用 timeout 函数是为了模拟网络延时状况
setTimeout(function () {
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
咱们还能够在工厂函数中返回 Promise 对象，把 webpack 和 ES2015 语法结合在一块儿使用
Vue.component('my-component', () => import('./async-component'))
三、边界状况
（1）访问元素
绝大多数状况下，咱们不该该触及另外一个组件实例内部或手动操做 DOM 元素，可是也的确存在这样的状况
- 访问父级组件实例
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: `<h3>{{ this.$parent.msg }}</h3>`
})
new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
</script>
</body>
</html>
- 访问子组件实例
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button v-on:click="showMsg()">打印信息</button>
<my-component ref="page"></my-component>
</div>
<script>
Vue.component('my-component', {
template: `<p>Hello World</p>`
})
new Vue({
el: '#app',
methods: {
showMsg: function () {
console.log(this.$refs.page)
}
}
})
</script>
</body>
</html>
- 访问子元素
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button v-on:click="changeText()">改变文本</button>
<p ref="page">Hello World</p>
</div>
<script>
new Vue({
el: '#app',
methods: {
changeText: function () {
this.$refs.page.innerHTML = 'Hello Vue'
}
}
})
</script>
</body>
</html>
- 依赖注入
使用 provide 选项指定提供什么数据给后代，而后在任何后代组件中均可以使用 inject 选项接收数据
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
inject: ['msg','toLower'],
template: `<p>{{ toLower(msg) }}</p>`
})
new Vue({
el: '#app',
data: {
msg: 'HELLO'
},
methods: {
toLower: function (msg) {
return msg.toLowerCase()
}
},
provide: function () {
return {
msg: this.msg,
toLower: this.toLower
}
}
})
</script>
</body>
</html>
【 阅读更多 Vue 系列文章，请看 Vue学习笔记 】
相关文章
- 1. OpenCV3学习笔记core组件进阶
- 2. Vue—— 组件进阶
- 3. 高阶组件学习笔记（二）
- 4. python进阶学习笔记
- 5. Redis学习笔记-进阶
- 6. Carsim进阶学习笔记
- 7. vim进阶学习笔记
- 8. vue2.0学习笔记（七）：深入理解Vue中的组件（2）--进阶篇
- 9. Vue-进阶学习
- 10. vue进阶学习
- 更多相关文章...
- • 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
- • 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 适用于PHP初学者的学习线路和建议
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里云，牛客助您找到心仪好工作
- 2. 解决jdbc(jdbctemplate)在测试类时不报错在TomCatb部署后报错
- 3. 解决PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE无法输入中文
- 4. vue+ant design中关于图片请求不显示的问题。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解决IDEA用Maven创建的Web工程不能创建Java Class文件的问题
- 7. [已解决] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea让java文件夹正常使用
- 9. Eclipse启动提示“subversive connector discovery”
- 10. 帅某-技巧-快速转帖博主文章（article_content）
欢迎关注本站公众号,获取更多信息
相关文章
- 1. OpenCV3学习笔记core组件进阶
- 2. Vue—— 组件进阶
- 3. 高阶组件学习笔记（二）
- 4. python进阶学习笔记
- 5. Redis学习笔记-进阶
- 6. Carsim进阶学习笔记
- 7. vim进阶学习笔记
- 8. vue2.0学习笔记（七）：深入理解Vue中的组件（2）--进阶篇
- 9. Vue-进阶学习
- 10. vue进阶学习