vue——插槽v-slot、组件的自定义事件、网络请求、面试题相关（数据的劫持顺序、单向数据流、DIFF算法）

温故知新：

组件的认识：

• 组件是可复用的
• 把组件当做一种标签使用 使用一次 它内部的代码就会完整的执行一次
• 类比函数 使用组件就相当于调用函数 实参就相当于组件的属性传值
• 不用把数据全部放在数据源中，会变化更新或网络请求的数据才放在data中，固定的数据直接写在模板标签中

关于项目的资源打包问题：

  热更新服务：将打包后的静态项目在内存中托管起来

  项目中的本地资源打包时：

• 引用文件的资源（import）、标签中引入的资源（img-src）会启用loder去加载资源  会被webpack打包
• 放在data数据源中的网址对应的资源（如把图片等本地资源的路径放在data中）  webpack不会读取data 所以webpack不打包
• data数据源中的图片应该放网络图片

编辑器写代码有波浪线

v-for：不写key会有警告

解决：绑定一个key 如果没有id就绑定for循环的下标 或者忽略不管没影响

标签的其他地方 命令窗口报错

解决：关闭webpack中配置的eslint的严格检测模式:lintOnSave:false

一、插槽v-slot

v-slot:插槽名    是具名插槽的用法  

       #s1            是插槽的语法糖
没有指定插槽名就是默认插入到插槽,不给插槽插入数据的话,就会使用组件的slot中的数据
插槽名不用使用引号引起来,直接写变量名
插入的内容必须是template标签或者组件 不能是原生的元素

eg:

设计组件里面:

• 默认槽位:< slot> < /slot>
• 具名槽位:< slot name="s1"> < /slot>

使用组件时:

< 组件名> 尖括号中的东西插入默认槽位 < /组件名>

< 组件名>

   < template v-slot:s1>插入内容必须放在这个标签中,老版本不用< template>

   < template #s1>插入内容必须放在这个标签中,老版本不用< template>

< /组件名>

（1）组件的属性传值：

   App.vue文件：

 
<script>
	import Box1 from "@/components/Box1.vue"
	export default {
		data() {
			return {
				n1: "app组件传给box组件的数据",
				n2: "app组件传给box的标题"
			}
		},
		components: {
			Box1,
		}
	}
script>
 
<style scoped="scoped">
	.appbox {
		width: 500px;
		min-height: 300px;
		background-color: honeydew;
		padding: 0px;
		border: 1px honeydew solid;
	}
style>

  Box1.vue文件：

<script>
	export default {
		props:["msg","title"]
	}
script>
<style scoped="scoped">
	.box {
		width:400px;
		min-height: 100px;
		background-color: darkgray;
		margin: 20px;
	}
style>

 结果显示：

（2）插槽

父组件使用子组件时要在子组件中插入内容 在子组件中就要用插槽来装 否则不会显示出来

插槽的位置在哪 插入的内容就在哪

   App.vue文件：