Vue系列2——組件創建、取父值、調父方法

vue實例的生命週期

• 什麼是生命週期：從Vue實例創建、運行、到銷燬期間，總是伴隨着各種各樣的事件，這些事件，統稱爲生命週期！
• 生命週期鉤子：就是生命週期事件的別名而已；
• 生命週期鉤子 = 生命週期函數 = 生命週期事件
• 主要的生命週期函數分類：
  • 創建期間的生命週期函數：
    • beforeCreate：實例剛在內存中被創建出來，此時，還沒有初始化好 data 和 methods 屬性
    • created：實例已經在內存中創建OK，此時 data 和 methods 已經創建OK，此時還沒有開始 編譯模板
    • beforeMount：此時已經完成了模板的編譯，但是還沒有掛載到頁面中
    • mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示
  • 運行期間的生命週期函數：
  • beforeUpdate：狀態更新之前執行此函數， 此時 data 中的狀態值是最新的，但是界面上顯示的 數據還是舊的，因爲此時還沒有開始重新渲染DOM節點
  • updated：實例更新完畢之後調用此函數，此時 data 中的狀態值 和 界面上顯示的數據，都已經完成了更新，界面已經被重新渲染好了！
  • 銷燬期間的生命週期函數：
    • beforeDestroy：實例銷燬之前調用。在這一步，實例仍然完全可用。
    • destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷燬。

生命週期圖解

template、組件、vm對象之間的關係

template是頁面

template是組件的一部分

組件使用在的v之中

組件定義方式

組件創建到使用分三步

1、創建組件模板對象

創建模板對象有兩種方法

1、使用extend創建模板對象

使用Vue.extend(組件描述對象)可以創建一個組件模板對象，如下：

var con1= Vue.extend({template:'xxx'})

2、 直接創建模板對象

代碼如下：

var con1 = {template: 'xxx'}

注意

• template可以獨立出來創建，如下：

// html
<!--在被控制的#app外面使用template 元素,定義組件的HTM模板結構 -->
<template id="tmp1">
<div>
<h1>這是通過template 元素,在外部定義的組件結構,這個方式,有代碼的只能提示和高亮</h1>
<h4>好用,不錯!R/
/h4>
</div>
</template>

// js

var con1 = Vue.extend({template: '#temp1'})

2、創建公有或私有組件

1、創建全局組件

通過對象字面量形式，定義一個組件模板，這裏也可以把組件內容對象定義成一個變量那麼component的第二個參數只需要寫上變量名即可。

var con1= Vue.extend({template:'xxx'})
var con2 = {template: 'xxx'}
// 方法1
Vue.component('組件名', con1)
// 方法2
Vue.component('組件名', con2)

2、創建私有組件

var vm = new Vue({
	el: '#app',
    components: { //定義實例內部私有組件的
        login: {
        template: ' <h1>這是私有的login 組件</h1> 1
        }
    }
})

3、使用創建好的組件

組件要使用在html中vm代碼之下。

// html
<div id="app">
	<組件名></組件名>
</div>

// js
var vm = new Vue({
	el: '#app',
    components: { //定義實例內部私有組件的
        組件名: {
        	template: ' <h1>這是私有的login 組件</h1> 1
        }
    }
})

易錯點總結

• 組件的命名不支持大寫，但支持-。

組件獲取到vm對象中的data數據-props

vm對象和組件對象都有data數據，組件對象的data屬於私有數據，組件內部隨意訪問，vm對象中的屬於公共數據，每個組件默認不能訪問，但可以使用props來改變這種默認設定，使組件內部也可以訪問到vm對象中的data。具體步驟如下：

1、在組件的定義處添加data同級屬性props

注意props的值爲一個數組，我們要將vm中的屬性名寫在props裏面，如果要添加多個屬性，只需要往props繼續添加新字符串即可。

Vue.component('組件名', {
	template: `xxx`,
	props: ['vm的data中屬性名']
});

2、在組件的標籤中配置屬性

<組件名 :vm的data中屬性名=vm的data中屬性名></組件名>

3、在template或methods中使用已配置好的父vm的data中屬性

只需要配置了第一步和第二步的vm中data的屬性，在組件中就可以像使用自己的data那樣去使用。

Vue.component('組件名', {
        template: `<h2>{{vm的data中屬性名}}`,
        props: ['vm的data中屬性名'],
        methods: {
        	m1() {
        		alert(this.vm的data中屬性名);
        	}
        }
});

易錯點總結

• 只需要配置了第一步和第二步的vm中data的屬性，在組件中就可以像使用自己的data那樣去使用，但vue強烈建議我們不要修改，也就是說vue建議vm中的data下定義的數據最好是隻讀的，如果要修改的話，應該定義在組件自己的data裏面。

• 紅色代表組件，黑色代表vm對象。props相當於打開了一個通道，讓組件可以利用這個通道訪問到vm的data下的數據。
  

組件調用vm對象中定義的方法

語法

// html
<組件名 @最終調用方法名="vm中的方法名"></組件名>
// js 》 組件的methos中某函數下
this.$emit('最終調用方法名')

具體步驟

1、在html代碼中引用組件的地方使用@語法設置一個最終調用方法名，並設置這個屬性的值爲父元素中要調用的方法

2、在組件的methods下某一個具體的函數(比如smethod)中使用this.$emit('最終調用方法名')調用vm對象的方法

3、在組件的template代碼中設置觸發調用smethod，即可達到調用vm對象中方法的目的

代碼

// html
<div id="app">
   <pass-fun @usepm="pm"></pass-fun>
</div>
// js
Vue.component('pass-fun', {
        template: `<button  @click="sm">點我試試</button>`,
        methods: {
            sm() {
                this.$emit('usepm');
            }
        }
    })

    var vm = new Vue({
        el: '#app',
        methods: {
            pm() {
                alert('ojbk');
            }
        }
    })

代碼說明圖片

易錯點總結

• 這裏出現了三個方法名，各有作用
  1. 父vm中要被調用的方法名，是真正被調用的方法
  2. 組件template中編寫事件綁定設置的新方法名，是爲真正被調用方法起的別名
  3. 組件中使用this.$emit的方法，這個方法的作用是使用this.$emit，通過2這個別名去真正調用方法1，我們在組件的template中通過綁定事件的方式觸發這個方法真正實現對1的調用

完整代碼

<div id="app">
    <!--1、給要調用的vm中方法m1起個新的調用方法名m2-->
   <pass-fun @m2="m1"></pass-fun>
</div>
<script>
    Vue.component('pass-fun', {
        template: `
            <div><button @click="m3">點我就會調用m3</button></div>//2、這裏綁定一個vm中的函數m3，通過點擊去執行這個m3
        `,
        methods: {
            m3() {
                /*3、當點擊發生，m3就會執行，會通過m2這個名字去調用到m2關聯的m1*/
                alert('我是m3，我的作用就是利用組件標籤中關聯了m1的m2這個名字去實現調用m1的目的');
                this.$emit('m2');
            }
        }
    })

    var vm = new Vue({
        el: '#app',
        methods: {
            m1() {
                alert('我是vm中的方法m1我真的被調用了，我確實執行了');
            }
        },
        component: {

        }
    })
</script>