目录1.组件的生命周期1.1生命周期与生命周期函数 1.2组件生命周期函数的分类1.3生命周期图示以及详解2.组件之间的数据共享2.1组件之间的关系2.2父向子传值2.3子
生命周期是指一个组件从 创建 => 运行 => 销毁 的整个时间段,强调的是一个时间段。生命周期函数是由 Vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。
组件创建阶段
beforeCreted
props/data/methods … 都未被创建,啥也干不了created
beforeMount
将要把内存中编译好的 html 结构渲染到浏览器中mounted
组件运行阶段
beforeUpdata
updataed
组件销毁阶段
beforeDestory
将要销毁这个组件,此时尚未销毁组件还处于正常工作的状态
destoryed
组件已经完全被销毁,此时组件在浏览器中对应的 DOM 结构已经完全移除
使用自定义属性
<Son :msg="message" :user="userinfo"></Son>
export default {
data() {
return {
message: 'hello son',
userinfo: {
name: 'pingting',
age: 18
}
}
}
}
子组件通过 props 声明自定义属性
<div>
<h3>Son 组件</h3>
<p>父组件传过来的 msg: {{ msg}} </p>
<p>父组件传过来的 user:{{ user}} </p>
</div>
export default {
props: ['msg' , 'user']
}
使用自定义事件
子组件通过 $emit
将值传递给父组件
当 click事件触发 => 调用 add 函数 => 触发 numChange 事件 =>
this.count作为实参传递给 getNewCount 函数 => 形参为 val
export default {
data(){
return {
// 子组件的数据
count: 0
}
},
methods: {
add(){
this.count += 1
// 触发一个自定义事件并且传递参数
this.$emit('numChange' , this.count)
}
}
}
父组件
@ 绑定自定义事件
<Right @numChange="getNewCount"></Right>
export default {
data() {
return {
// 接收 right 传过来的 count
countFather: 0
}
},
methods: {
getNewCount(val){
this.countFather = val
}
}
}
在 vue2.x 使用 eventBus
创建 eventBus.js
模块,并向外共享一个 Vue 的实例对象
import Vue from 'vue'
export default new Vue()
在数据发送方,调用 bus.$emit('事件名称',发送的数据)
方法触发自定义事件
<button @click="sendStr">发送数据给 Right </button>
import bus from './eventBus.js'
export default {
data(){
return {
str: '这是Son的str数据,将要共享出去'
}
},
methods: {
sendStr(){
// 通过 eventBus 发送数据
bus.$emit('share' , this.str)
}
}
}
在数据接收方,调用 bus.$on('事件名称',事件处理函数)
方法注册一个自定义事件
<p>从 Son 接受的数据:{{ strFromSon }} </p>
import bus from './eventBus.js'
export default {
data(){
return {
strFromSon: ''
}
},
created() {
bus.$on('share' , (val) => {
this.strFromSon = val
})
}
}
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!
--结束END--
本文标题: Vue 生命周期和数据共享详解
本文链接: https://www.lsjlt.com/news/140086.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0