2018-09-23非父子组件传值与生命周期
2018-09-23 本文已影响0人
Rascar
生命周期：每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期
①生命周期列表：
13987241-a9969bea45b5a089.png
它可以总共分为8个阶段：
beforeCreate（创建前）,
created（创建后）,
beforeMount(载入前),
mounted（载入后）,
beforeUpdate（更新前）,
updated（更新后）,
beforeDestroy（销毁前）,
destroyed（销毁后）
vue生命周期定义：
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
二非父子组件传值
首先要var一个对象，列入：(看案例)
非父子传值要用var的对象来指向他本身，非父子传值和子传值很想都是用$emit(“定义的函数”，this.指向的东西)来传递
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<my-father></my-father>
<my-sun></my-sun>
</div>
<script>
var bus = new Vue()
Vue.component("my-father",{
template:`
<button @click="btn">发送</button>
`,
data:function(){
return{
list:"你好"
}
},
methods:{
btn:function(){
bus.$emit("head",this.list)
}
}
})
Vue.component("my-sun",{
template:`
<div>
<h1>{{mag}}</h1>
<h1>{{leta}}</h1>
</div>
`,
data:function(){
return{
mag:"",
leta:"我是组件b"
}
},
mounted:function(){
bus.$on("head",list=>{
this.mag=list
})
}
})
new Vue({
el:"#app",
})
</script>
</body>
</html>
