vue 学习小结（生命周期和组件传值）

vue 学习小结（生命周期和组件传值）

最近需要用到 vue 框架的项目，所以又去学习了 vue，这里简单做个小结，讲一讲 vue 2.0 的生命周期和组件传值，适用于阅读 vue 文档后。

一、生命周期

官方流程图：

例子：

var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
	......(各个生命周期)
}

运行图：

更新后：（改变data）

• beforeCreate：（ 组件实例刚被创建，组件属性计算之前，$el data没有初始化）

• created：（组件实例创建完成，属性已绑定，data 数据初始化，但是 DOM 未生成，$el 属性不存在 ）

• beforeMount：（模板编译/挂载之前，完成了 $el 和 data 初始化，但是这里的 el 还是 {{message}}）

• mounted：（模板编译/挂载之后， $el的位置变成message的值）这里有个this.$nextTick方法，适用于想操控真实 DOM(因为有时 mounted 会出现渲染未完成就执行方法)

    mounted () {
    	this.init();
        this.$nextTick(function(){
        	this.doA(1);//DOM 操作
        	this.doB();//DOM 操作
        })
    }
  

• beforeUpdate：（组件更新前）

• updated：（组件更新后）

• beforeDestroy：（组件销毁前）

• destroyed：（组件销毁后）

二、传值

(1)组件传值

1.父子传值

父：

<header :value='message'  :url = "Url"><header/>

子：

export default {
	name:'header',
	props: {
      value: {
        default: '',
        type: String
      },
	url: {
        default: 'http://...',
        type: String
      },
	}
}

2.子父传值

父：

<header @child-event="console"><header/>

...
methods:{
	console('子组件传递给父组件内容'){
		...
	}
}

子：

this.$emit('child-event','子组件传递给父组件内容')

3.兄弟传值（事件总线 Event Bus）

4.vuex

（2）路由传值

组件A：

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } })

组件B：

获取 this.$route.query.orderId 的值