vue的生命周期/鉤子函數(shù)
? ? ? ? ? 對(duì)于實(shí)現(xiàn)頁(yè)面邏輯交互等效果，我們必須知曉vue的生命周期，才能愉快的玩耍，知道我們寫(xiě)的東西應(yīng)該掛載到哪里，vue官方給出的api講解的那叫一個(gè)簡(jiǎn)單啊，如下：
? ? ? ? 所有的生命周期鉤子自動(dòng)綁定this上下文到實(shí)例中，因此你可以訪問(wèn)數(shù)據(jù)，對(duì)屬性和方法進(jìn)行運(yùn)算。這意味著你不能使用箭頭函數(shù)來(lái)定義一個(gè)生命周期方法(例如created: () => this.fetchTodos())。這是因?yàn)榧^函數(shù)綁定了父上下文，因此this與你期待的 Vue 實(shí)例不同，this.fetchTodos的行為未定義。
vue中所有的鉤子函數(shù)：
beforeCreate（創(chuàng)建前）
created（創(chuàng)建后）
beforeMount（載入前）
mounted（載入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（銷毀前）
destroyed（銷毀后）
beforecreate?: 舉個(gè)栗子：可以在這加個(gè)loading事件?
created?：在這結(jié)束loading，還做一些初始化，實(shí)現(xiàn)函數(shù)自執(zhí)行?
mounted?： 在這發(fā)起后端請(qǐng)求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情
beforeDestroy： 你確認(rèn)刪除XX嗎？ destroyed ：當(dāng)前組件已被刪除，清空相關(guān)內(nèi)容
組件之間的傳值
在Vue的框架開(kāi)發(fā)的項(xiàng)目過(guò)程中，經(jīng)常會(huì)用到組件來(lái)管理不同的功能，有一些公共的組件會(huì)被提取出來(lái)。這時(shí)必然會(huì)產(chǎn)生一些疑問(wèn)和需求？比如一個(gè)組件調(diào)用另一個(gè)組件作為自己的子組件，那么我們?nèi)绾芜M(jìn)行給子組件進(jìn)行傳值呢？如果是電商網(wǎng)站系統(tǒng)的開(kāi)發(fā)，還會(huì)涉及到購(gòu)物車(chē)的選項(xiàng)，這時(shí)候就會(huì)涉及到非父子組件傳值的情況。當(dāng)然你也可以用Vuex狀態(tài)管理工具來(lái)實(shí)現(xiàn)，這部分我們后續(xù)會(huì)單獨(dú)介紹。我先給大家介紹Vue開(kāi)發(fā)中常用的三種傳值方式。
Vue常用的三種傳值方式有：
父?jìng)髯?/p>
子傳父
非父子傳值
引用官網(wǎng)的一句話：父子組件的關(guān)系可以總結(jié)為 prop 向下傳遞，事件向上傳遞。父組件通過(guò) prop 給子組件下發(fā)數(shù)據(jù)，子組件通過(guò)事件給父組件發(fā)送消息， 如下圖所示：
接下來(lái)，我們通過(guò)實(shí)例來(lái)看可能會(huì)更明白一些：
1. 父組件向子組件進(jìn)行傳值
父組件：
<template>
? <div>
? ? 父組件:
? ? <input type="text" v-model="name">
? ? <br>
? ? <br>
? ? <!-- 引入子組件 -->
? ? <child :inputName="name"></child>
? </div>
</template>
<script>
? import child from './child'
? export default {
? ? components: {
? ? ? child
? ? },
? ? data () {
? ? ? return {
? ? ? ? name: ''
? ? ? }
? ? }
? }
</script>
子組件：
<template>
? <div>
? ? 子組件:
? ? <span>{{inputName}}</span>
? </div>
</template>
<script>
? export default {
? ? // 接受父組件的值
? ? props: {
? ? ? inputName: String,
? ? ? required: true
? ? }
? }
</script>
2. 子組件向父組件傳值
子組件：
<template>
? <div>
? ? 子組件:
? ? <span>{{childValue}}</span>
? ? <!-- 定義一個(gè)子組件傳值的方法 -->
? ? <input type="button" value="點(diǎn)擊觸發(fā)" @click="childClick">
? </div>
</template>
<script>
? export default {
? ? data () {
? ? ? return {
? ? ? ? childValue: '我是子組件的數(shù)據(jù)'
? ? ? }
? ? },
? ? methods: {
? ? ? childClick () {
? ? ? ? // childByValue是在父組件on監(jiān)聽(tīng)的方法
? ? ? ? // 第二個(gè)參數(shù)this.childValue是需要傳的值
? ? ? ? this.$emit('childByValue', this.childValue)
? ? ? }
? ? }
? }
</script>
父組件：
<template>
? <div>
? ? 父組件:
? ? <span>{{name}}</span>
? ? <br>
? ? <br>
? ? <!-- 引入子組件 定義一個(gè)on的方法監(jiān)聽(tīng)子組件的狀態(tài)-->
? ? <child v-on:childByValue="childByValue"></child>
? </div>
</template>
<script>
? import child from './child'
? export default {
? ? components: {
? ? ? child
? ? },
? ? data () {
? ? ? return {
? ? ? ? name: ''
? ? ? }
? ? },
? ? methods: {
? ? ? childByValue: function (childValue) {
? ? ? ? // childValue就是子組件傳過(guò)來(lái)的值
? ? ? ? this.name = childValue
? ? ? }
? ? }
? }
</script>
3. 非父子組件進(jìn)行傳值
非父子組件之間傳值，需要定義個(gè)公共的公共實(shí)例文件bus.js，作為中間倉(cāng)庫(kù)來(lái)傳值，不然路由組件之間達(dá)不到傳值的效果。
公共bus.js
//bus.js
import Vue from 'vue'
export default new Vue()
組件A：
<template>
? <div>
? ? A組件:
? ? <span>{{elementValue}}</span>
? ? <input type="button" value="點(diǎn)擊觸發(fā)" @click="elementByValue">
? </div>
</template>
<script>
? // 引入公共的bug，來(lái)做為中間傳達(dá)的工具
? import Bus from './bus.js'
? export default {
? ? data () {
? ? ? return {
? ? ? ? elementValue: 4
? ? ? }
? ? },
? ? methods: {
? ? ? elementByValue: function () {
? ? ? ? Bus.$emit('val', this.elementValue)
? ? ? }
? ? }
? }
</script>
組件B：
<template>
? <div>
? ? B組件:
? ? <input type="button" value="點(diǎn)擊觸發(fā)" @click="getData">
? ? <span>{{name}}</span>
? </div>
</template>
<script>
? import Bus from './bus.js'
? export default {
? ? data () {
? ? ? return {
? ? ? ? name: 0
? ? ? }
? ? },
? ? mounted: function () {
? ? ? var vm = this
? ? ? // 用$on事件來(lái)接收參數(shù)
? ? ? Bus.$on('val', (data) => {
? ? ? ? console.log(data)
? ? ? ? vm.name = data
? ? ? })
? ? },
? ? methods: {
? ? ? getData: function () {
? ? ? ? this.name++
? ? ? }
? ? }
? }
</script>
---------------------
原文：
? ? ? ? ? https://blog.csdn.net/lander_xiong/article/details/79018737
