## 一、項目目錄下創建文件夾components
## 二、在components下右鍵創建vue組件
## 三、創建成功組件后可以有兩種方式的引入
1、全局引入
2、局部的引入與使用
```
<template>
<view class="content">
<Child></Child>
</view>
</template>
<script>
import Child from "@/components/child.vue"
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
},
components:{
Child
}
}
</script>
```
## 四、父組件和子組件傳遞信息
1、父組件
```
<template>
<view class="content">
<Child msg="我是父組件定義的信息"></Child>
</view>
</template>
<script>
import Child from "@/components/child.vue"
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
},
components:{
Child
}
}
</script>
```
2、子組件
```
<template>
<view>
我是組件
<view>{{msg}}</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props:['msg']
}
</script>
<style scoped>
</style>
```
## 五、子組件和父組件通信
1、父組件
```
<template>
<view class="content">
<Child :msg="titles" @abc="hello"></Child>
</view>
</template>
<script>
import Child from "@/components/child.vue"
export default {
data() {
return {
titles:"父組件和子組件通信"
}
},
onLoad() {
},
methods: {
hello(){
this.titles="子組件和父組件通信"
}
},
components:{
Child
}
}
</script>
```
2、子組件
```
<template>
<view>
我是組件
<view>{{msg}}</view>
<view>
<button type="default" @click="cc">按鈕</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props:['msg'],
methods:{
cc(){
this.$emit('abc')
}
}
}
</script>
<style scoped>
</style>
```
## 六、子組件向父組件傳遞參數
1、父組件
```
<template>
<view class="content">
<Child :msg="titles" @abc="hello"></Child>
</view>
</template>
<script>
import Child from "@/components/child.vue"
export default {
data() {
return {
titles:"父組件和子組件通信"
}
},
onLoad() {
},
methods: {
hello(mm){
this.titles=mm
}
},
components:{
Child
}
}
</script>
```
2、子組件
```
<template>
<view>
我是組件
<view>{{msg}}</view>
<view>
<button type="default" @click="cc">按鈕</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props:['msg'],
methods:{
cc(){
this.$emit('abc','我是子組件通過事件向父組件傳遞的參數,替換掉父組件的內容')
}
}
}
</script>
```
## 七、全局組件通信
1、API
uni.$on()
實例:
a、首先定義一個事件方法
```
<template>
<view>
用戶列表
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
uni.$on('getinfosss',()=>{
console.log('user組件中的全局事件被觸發')
})
},
methods: {
}
}
</script>
```
注意:定義了一個事件方法后可以在任意一個地方去觸發這個方法
b、觸發全局方法
```
uni.$emit('getinfosss')
```
注意:通過方法觸發
2、vuex全局狀態管理