整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
读本文约需要10分钟，您可以先关注我们，避免下次无法找到。
本篇文章成哥继续带大家来学习前端VUE教程，今天主要讲解VUE的插槽等相关知识点。下面我们就一起来学习该块内容吧！
插槽就是子组件中的提供给父组件使用的一个占位标识符，用<slot></slot> 表示（），父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签，下面我们来看看具体示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--调用子组件-->
<Child>
<p style="color: red">插槽示例(本内容将会渲染至子组件slot位置处)</p>
</Child>
</div>
<script>
// 定义一个子组件Child，同时在其html内部增加<slot></slot>进行占位
var Child = {
data: function () {
return {
}
},
/*父组件在调用子组件时会把其在子组件标签的内容渲染进slot占位处*/
template: '<h4>我是子组件<slot></slot></h4>',
}
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
// 在 components 选项中定义你想要使用的组件
components: {
"Child": Child,
},
data: { // 数据对象
},
})
</script>
</body>
</html>
这时肯定有人疑惑如果我子组件中没有slot标签然后再父组件中调用子组件时也在期内写上内容会不会被渲染了，我们来看一下演示：现在可以得出一个结论如果子组件中没有<slot></slot>标签，则父组件调用子组件时内插入的所有内容都会被丢弃，不会被渲染出来
如上面的列子中如果我们想在插槽中使用数据时,会发现插槽中的数据是由父组件的data控制的而不是子组件进行控制，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--由于编译作用域所以这边的v-show与msg其实都是父组件传递的值,因为这些内容都是父组件编译的-->
<Child v-show="isShow">
<p style="color: red">插槽编译作用域示例： {{msg}}</p>
</Child>
</div>
<script>
var Child = {
data: function () {
return {
msg: "我是子组件msg的值"
}
},
// 子组件定义的msg变量值不会渲染到插槽内
template: '<h4>我是子组件<slot></slot></h4>',
}
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
// 在 components 选项中定义你想要使用的组件
components: {
"Child": Child,
},
data: { // 数据对象
isShow: true,
msg: "我是父组件msg的值"
},
})
</script>
</body>
</html> 编译作用域其实就是一条规则就是，父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个 <submit-button> 组件中
<button type="submit">
<slot></slot>
</button> 我们可能希望这个 <button> 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 <slot> 标签内：
<button type="submit">
<slot>Submit</slot>
</button> 现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时：
<submit-button></submit-button> 后备内容“Submit”将会被渲染：
<button type="submit">
Submit
</button> 但是如果我们提供内容：
<submit-button>
Save
</submit-button> 则这个提供的内容将会被渲染从而取代后备内容：
<button type="submit">
Save
</button> 具名插槽就是给插槽指定名称我们在使用时通过名称来指定其渲染的位置，具体示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--具名插槽示例-->
<Child>
<!--按照插槽名称进行标签传递渲染，具体渲染顺序是根据子组件中编写插槽的顺序来的-->
<template v-slot:header>
<div>我是header</div>
</template>
<template v-slot:footer>
<div>我是footer</div>
</template>
<!--如果不指定插槽名称标签会被渲染至默认插槽处，也就是没有定义名称的插槽位置-->
<template>
<div>我会被渲染至默认插槽位置</div>
</template>
</Child>
</div>
<script>
var Child = {
data: function () {
return {
msg: "我是子组件msg的值"
}
},
// 定义具名插槽，没有定义名称的slot会有一个默认值为default,在父组件调用时没有指定渲染插槽名称的标签会被渲染至默认插槽位置
template: '<div><h4>我是子组件</h4><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>',
}
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
// 在 components 选项中定义你想要使用的组件
components: {
"Child": Child,
},
data: { // 数据对象
},
})
</script>
</body>
</html> 作用域插槽就是让父组件的插槽内容插能够访问子组件中才有的数据，具体使用示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--作用域插槽示例-->
<Child>
<!--这边v-slot后面其实省略了default名称详细写法v-slot:default="slotProps"-->
<template v-slot="slotProps">
<!--通过slotProps获取子组件中给slot v-bind的值，然后进行遍历读取-->
<div v-for="item in slotProps.user">姓名: {{ item.name }} 得分: {{ item.score }}</div>
</template>
</Child>
</div>
<script>
var Child = {
data: function () {
return {
userList: [
{"name": "小明", "score": "90"},
{"name": "小红", "score": "95"},
{"name": "小强", "score": "96"}
]
}
},
// 定义作用域插槽，给slot v-bind了一个userList的值
template: '<div><h4>作用域插槽示例</h4><slot :user="userList"></slot></div>',
}
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
// 在 components 选项中定义你想要使用的组件
components: {
"Child": Child,
},
data: { // 数据对象
},
})
</script>
</body>
</html> 至此我们VUE基础教程就就讲完了，主要讲解了VUE的基础用法，其实VUE还有一些进阶知识如vue-router（前端路由）、vuex（数据状态管理）等内容，但这些内容主要用在项目构建上，成哥在下面AntDesign vue教程中会进行穿插讲解，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
相关阅读：
预编译发生在函数作用域创建的阶段在函数执行之前。
函数、形参、变量的优先级别：
函数 > 形参 > 变量
全局作用域预编译
函数作用域预编译
function fn(a){
console.log(a,1); // ? a () {} 1
var a=2222;
console.log(a,2); // 2222 2
function a () {}
console.log(a,3); // 2222 3
}
fn(1,2)function fn(a, c) {
console.log(a);
var a=123;
console.log(a);
console.log(c);
function a() { }
if (false) {
var d=678
}
console.log(d);
console.log(b);
var b=function () { }
console.log(b);
function c() { }
console.log(c);
}
fn(1, 2)第一阶段：创建 AO 对象，查找函数形参以及函数内部的变量声明,实参和形参相统一，如果没有传递实参，那么值为 undefined
AO : {
a : undefined -> 1
c : undefined -> 2
b : undefined
d : undefined
}第二阶段：查找函数声明
AO : {
a : undefined -> 1 -> function a() { }
c : undefined -> 2 -> function c() { }
b : undefined -> function () { }
d : undefined
}执行代码
全栈攻城狮-每日更新原创IT编程技术及日常实用视频。
主要内容：正式引入HTML网页开发，学习并了解HTML的相关知识。变身Web开发达人，做全栈程序员。这是以第一课，希望以我的方式，你将学会HTML这门课程。
今天的话，主要讲解一下HTML相关知识，同样在接下来的一段时间的安排中，也以HTML为主。崇尚全栈，也就意味着我们，需要学习主流的技术知识。在前一段时间内，主要讲解了.Net的只是教程。当然.NET并没有完毕。
C#语言
只是在这里把HTML穿插进来，一则巩固自己所得，二来学习一下这门非常简单的HTML技术。学习完毕HTML之后则会，继续进行基础加强、数据库、MVC等教程的协作工作。
PDF文档
同时在前一个阶段内，讲解的并不是很好，在这个HTML阶段内，则会吸取教训，争取写出更符合初学者学习的技术教程。当然前面的课程也会不断的修正，最后我会生成PDF的文档，发给大家。
HTML概述
HTML，超文本标记语言，超文本就意味着有多于文字的形式，比如包含超链接、图片、视频、动画等形式。HTML是应用在网站网页展现的一种语法结构。我们在使用浏览器浏览网页的时候，看到的界面都是由HTML代码表现出来的。HMTL可以说是一种展示文字图片视频等元素的一种方式。通过特定的标记就能展示出来自己想要的效果。如何展现？就让我一步步教你。
物联网
互联网的飞速发展，导致了形形色色的网站应用被创建。云计算、物联网仿佛唾手可得。把诸多应用建立在云上，通过这种浏览器与用户交互的形式让人们使用。这些所有网络应用，只要是通过浏览器进行使用的情况，都是需要HTML技术。当然HTML作为基础之用。这就要求我们程序员，必须学习并熟悉HTML语言。能在这个基础上进行Web的开发。
HTML是解释性语言，不需编译，直接书写之后，就可以运行。
HTML是纯文本类型的语言，你完全可以通过记事本程序进行创建书写。
虽然HTML可以通过记事本来创建写代码，但是并不推荐，因为以前学习过.Net，所以依旧使用Visual Studio。VS也是前端的开发神器。
自己写的HTML代码，在不同的浏览器内，可能会有不同的展示效果。这是由浏览器的渲染引擎决定的。
HTML具有平台无关性，在任何平台只要拥有一款浏览器，你就可以打开HTML网页。
HTML代码运行在浏览器中，也就是需要使用浏览器进行测试。
HTML
今天就先说一下HTML的基本知识，电脑编程系列教程，下节继续。
*请认真填写需求信息，我们会在24小时内与您取得联系。
