1.組件的引入index5頁(yè)面

例如：

<template>

<view>

<!-- 3.使用引入的組件 -->

<img-border></img-border>

</view>

</template>

<script>

// 1.import 引入自定義組件

import imgBorder from "@/components/img-border.vue";

export default {

data() {

return {

}

},

methods: {

},

// 2.注冊(cè)上面引入的組件

components:{

imgBorder

}

}

2.父組件向子組件傳參（等于在父頁(yè)面引入一個(gè)子模板，數(shù)據(jù)可以在父頁(yè)面里面靈活改變）

子組件img-border：

父頁(yè)面：

子父關(guān)系圖：

3.子組件向父組件傳遞數(shù)據(jù)

子組件.Vue：

父組件.vue：

4.全局共享數(shù)據(jù)

調(diào)用全局變量：

onLoad() {

console.log('打印main.js里面的全局變量',this.baseurl);//通過(guò)vue的原型定義的變量

console.log(getApp().globalData.imgAdr);//通過(guò)globalData定義全局變量

}

main.js里面創(chuàng)建vue全局?jǐn)?shù)據(jù)：

App.vue里面創(chuàng)建globaldata全局?jǐn)?shù)據(jù)：

5.組件插槽

子組件里面封裝好的from模板：

父頁(yè)面引入子組件：

插槽子父關(guān)系圖：

6.生命周期