生命周期：
周期图表
download.png
reated（创建后）,
beforeMount(载入前),
mounted（载入后）,
beforeUpdate（更新前）,
updated（更新后）,
beforeDestroy（销毁前）,
destroyed（销毁后）
vue生命周期定义：
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
二非父子组件传值
（1）：新建一个空的root组件:let Event=new Vue();
（2）:发送数据的组件：Event.on('a-fnName',(data)=>{}),注意函数格式必须写为箭头函数，不然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="send">发送</button>
`,
data:function(){
return{
list:"hello vue"
}
},
methods:{
send: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>
网友评论