生命周期:每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期
①生命周期列表:
它可以总共分为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>