slot插槽和生命周期

最新推荐文章于 2023-01-05 17:56:22 发布

nanwanLisa

最新推荐文章于 2023-01-05 17:56:22 发布

阅读量574

点赞数

本文链接：https://blog.csdn.net/nanwanLisa/article/details/97965045

版权

slot 插槽

2.5 slot slot-scope

具名插槽

2.6 v-slot

slot ：（插槽）
作用：开辟一个空间，给未来元素使用
未来元素：组件内容

在子组件中添加slot标签，可以解析根组件里面添加在子组件里面的内容


<body>
<div id="app">
<Hello>
<p>这是hello组件·的内容</p>
</Hello>
</div>
<template id="hello">
<div>
<p>这是个组件</p>
<slot></slot>
</div>
</template>
</body>


Vue.component('Hello',{
    template:'#hello'
    }
)

new Vue（{

}）.$mount('#app')

.$mount('#app')  :  叫做手动挂载

结果展示：

但是，slot标签的添加在原本子组件内容的下面可以通过 slot 标签身上的 name 属性改变位置：


<body>
<div id="app">
<Hello>
<header slot = "header">
头部
</header>
<footer>
底部
</footer>
</Hello>
</div>
<template id="hello">
<div>
<slot name = "header"></slot>
<h3> 这里是hello组件 </h3>
<slot></slot>
</div>
</template>
</body>

结果展示：

slot-scope 作用域插槽


<body>
<div id="app">
<Hello>
<span slot-scope = "data">
{{ data.msg }}
</span>
</Hello>
</div>
<template id="hello">
<div>
<h3> 这里是hello组件 </h3>
<slot :msg = "msg"></slot>
</div>
</template>
</body>



<script src="../../../lib/vue.js"></script>
<script>
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello 1905'
}
}
})
new Vue({
el: '#app'
})
</script>

v-slot

v-slot的目的是将slot组件身上的数据传递给绑定的未来元素


<body>
<div id="app">
<Hello>
<template v-slot:default="data">
<!-- data 是接收到的组件身上的数据 -->
<p>{{data.msa}}</p>
</template>
</Hello>
</div>
<template id="hello">
<div>
<p>花游记</p>
<slot :msa="msa"></slot>
</div>
</template>
</body>


Vue.component('Hello', {
template: '#hello',
data() {
return {
msa: 'lisa',
}
}
})
new Vue({
}).$mount('#app')

结果展示：

生命周期【组件的钩子有哪些】

想要使用组件，那么就要在组件的特定段完成特定的任务
名词：钩子
- 特定的时间点，触发一个方法

组件的生命周期分为三个阶段：

初始化
运行中
销毁

初始化：

1.beforeCreate(){}

组件即将创建
任务：初始化事件，并且为整个生命周期的开始做准备
意义：
- 数据未获取，真实dom未拿到
- 可以进行数据请求，数据修改


<body>
<div id="app">
<p> {{msg}}</p>
</div>
</body>




<script>
new Vue({
el: '#app',
data: {
msg: 'Lisa 好看'
},
beforeCreate() {
console.log("1-beforeCreate")
console.log('data', this.msg)
console.log('dom', document.querySelector('p'))
},
})
</script>

结果展示：

数据请求


beforeCreate() {
console.log("1-beforeCreate")
console.log('data', this.msg)
console.log('dom', document.querySelector('p'))
fetch('./data.json', )
.then(res => res.json())
.then(res => console.log(res))
.catch(error => console.log(error))
},

结果展示
[外链图片转存失败(img-M3ihNgme-1564579345754)(en-resource://database/1909:0)]
[外链图片转存失败(img-JwxdDzoO-1564579345755)(en-resource://database/1915:0)]

数据修改


fetch('./data.json', )
.then(res => res.json())
.then(data => {
this.msg = data.name
})
.catch(error => console.log(error))

2.created(){}

组件创建结束
任务：
可以得到数据，dom未得到
可以进行数据请求和数据修改


created() {
console.log("2-create")
console.log('data', this.msg)
console.log('dom', document.querySelector('p'))
fetch('./data.json')
.then(res => res.json())
.then(data => {
this.msg = data.name
})
.catch(error => console.log(error))
},

结果示例

3.beforeMount(){}

组件即将挂载
任务：判断组件是否有 el/template选项，如果有那么使用render函数将template模板中的jsx转换成VDOM对象，如果没有，需要我们使用$mount/outerHTML手动挂载
可以进行数据请求和数据修改


beforeMount() {
console.log("2-create")
console.log('data', this.msg)
console.log('dom', document.querySelector('p'))
fetch('./data.json')
.then(res => res.json())
.then(data => {
console.log('data', data)
this.msg = '李四'
})
.catch(error => console.log(error))
},

4.mounted(){}

组件挂载结束
任务：将VDOM渲染为真实dom，然后挂载到页面中
操作真实dom【可以进行第三方库实例化】
可以进行数据请求和数据修改
总结;
我们常将数据请求写在 created 中，因为created钩子是第一次获得数据的地方
mounted钩子函数可以进行DOM操作【第三方库实例化【静态数据】】

运行中

1.beforeUpdate

组件更新前
触发条件：组件的数据发生改变
任务：VDOM重新生成，然后通过diff算法和以前得VDOM对比，生成patch补丁对象

updated

组件更新结束
触发条件：组件的数据发生改变
任务：将patch补丁对象进行渲染生成真实dom
意义：可以操作DOM【第三方的实例化【动态数据】】

总结：一般用updated 进行第三方库实例化

销毁

用来完成善后工作【计时器，第三方库实例，window.onscroll】
组件销毁的两种形式
1.内部销毁 $destroy

组件会被销毁掉，但是组件的DOM外壳还在
2.外部销毁：
推荐使用开关销毁

3.组件的销毁会触发两个钩子函数

beforeDestroy(){} 销毁前
destroyed(){} 销毁结束

生命周期的案例

轮播：

Swiper 第三方库
数据请求+数据修改 created(){}
静态数据第三方库实例化 mounted(){}
动态数据第三方库实例化：updated【做判断，避免重复实例化】/Vue.nextTick（this.$nextTick）/ setTimeout

生命周期小结

三个阶段：初始化运行中销毁
8个钩子
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDstory
destroyed
项目中如何使用
- 数据请求+数据修改 created中写
- 静态数据第三方库实例化–mounted
- 动态数据第三方库实例化–updated 【做判断，避免重复实例化】 / Vue.nextTick【 this.$nextTick】 /setTimeout
- 善后工作：destoryed

自定义过滤器

1.过滤器是对已有数据进行格式化
2.过滤器也可以传递参数
3.过滤器要使用管道符才能起作用

分类

全局过滤器 Vue.filter(过滤器名称，回调函数)


// Vue.filter(过滤器的名称，过滤器的回调函数)
Vue.filter('dateFilter', (val, type) => { //val 就是我们要过滤的数据
 console.log('val', val) //val 1564574029888
// // 回调函数中返回的是什么，格式化后的数据就是什么
 var date = new Date(val)
 return date.getFullYear() + type + (date.getMonth() + 1) + type + date.getDate()
 })
 new Vue({
 el: '#app',
data: {
 time: Date.now() //时间戳
 }

局部过滤器 filter选项


filters: {
//过滤器名称： 回调函数
'dateFilter': ( val,type) => {
var date = new Date( val )
return date.getFullYear() + type + ( date.getMonth() + 1 ) +type+ date.getDate()
}
}

nanwanLisa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
slot插槽和生命周期

slot 插槽2.5 slot slot-scope具名插槽2.6 v-slotslot ：（插槽）作用：开辟一个空间，给未来元素使用未来元素：组件内容在子组件中添加slot标签，可以解析根组件里面添加在子组件里面的内容<body><div id="app"><Hello><p>这是hello组件·的内容...
复制链接

扫一扫