一、父組件給子組件傳參 props
props用法vue props:{ xxxx: { type: Object, default:null } }
以下有注釋的部分是需要寫(xiě)的代碼
以下例子是父組件（列表頁(yè)）加載公共的操作按鈕
子組件.vue
以設(shè)置權(quán)限為例
<template>
<vab-query-form-left-panel :span="12">
<el-button
:disabled="buttonDis.disPerssion"
icon="el-icon-plus"
type="primary"
@click="showSetPermission"
>
設(shè)置權(quán)限
</el-button>
</vab-query-form-left-panel>
</template>
<script>
import { ref, toRefs, reactive } from 'vue'
export default {
name: 'FunctionArea',
// 定義父組件 html 傳參時(shí)的 key 名字
// 在父組件中 listData 的寫(xiě)法變?yōu)?list-data
props: { listData: { type: Object, default: null } },
setup(props) {
const state = reactive({
// 將從父組件中獲取的 listData 的值付給新的變量
// 通過(guò) props 調(diào)用
buttonDis: props.listData,
})
return {
...toRefs(state),
}
},
}
</script>
父組件.vue
<template>
<div class="user-management-container">
<vab-query-form>
<!-- 這里 :list-data 給子組件傳參數(shù) -->
<FunctionArea :list-data="buttonDis" />
</vab-query-form>
<Paging ref="pagging" />
</div>
</template>
<script>
import { defineComponent, reactive, toRefs, provide } from 'vue'
// 加載組件
import FunctionArea from '../functionArea/functionArea'
export default defineComponent({
name: 'List',
// 注冊(cè)組件
components: { FunctionArea },
setup() {
const selectRows = reactive({
list: {},
})
// 按鈕是否禁用的狀態(tài)，把這個(gè)傳給子組件
const buttonDis = reactive({
disDelete: true,
disEdit: true,
disPerssion: true,
})
const setSelectRows = (val) => {
selectRows.list = val
if (selectRows.list.length === 1) {
buttonDis.disEdit = false
buttonDis.disDelete = false
buttonDis.disPerssion = false
} else if (selectRows.list.length != 1) {
buttonDis.disEdit = true
buttonDis.disDelete = false
buttonDis.disPerssion = true
}
}
const fetchData = async () => {
const { data } = await getList()
}
onMounted(() => {
fetchData()
})
return {
...toRefs(state),
// 把要傳給子組件的參數(shù)，返回到模板中
buttonDis,
}
},
})
</script>
二、父組件調(diào)用子組件方法
關(guān)鍵步驟都在父組件中。
- 在 html 中加載組件 html，然后在 html 中添加
ref='xxx'- 獲取子組件對(duì)象
const xxx = ref(null)- 在父組件的
return中返回xxx
：這里的
xxx都是相同的名字
子組件.vue
<template>
<div id="AdminEdit">
<el-dialog v-model="dialogFormVisible" :title="title" width="600px" @close="close">
<template #footer>
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="save">確定</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import { defineComponent, reactive } from 'vue'
export default defineComponent({
name: 'AdminEdit',
setup() {
const state = reactive({
formRef: null,
dialogFormVisible: false,
})
// 這個(gè)是父組件要調(diào)用的方法
const showEdit = () => {
state.dialogFormVisible = true
}
const close = () => {}
const save = () => {}
return {
...toRefs(state),
// 這里要返回
showEdit,
close,
save,
}
},
})
</script>
父組件.vue
父組件調(diào)用子組件的顯示彈框方法 howEdit
<template>
<!-- html 加載子組件，并定義 ref -->
<AdminEdit ref="editRef" />
</template>
<script>
import { ref, toRefs, reactive } from 'vue'
// 加載組件
import AdminEdit from '../operation/setEidt/AdminEdit'
export default {
name: 'FunctionArea',
// 注冊(cè)子組件
components: { AdminEdit },
setup(props) {
// 聲明子組件對(duì)象
// 注意，注意：這里的 editRef 與上面 html中 ref 值相同
const editRef = ref(null)
const showEdit = () => {
// 通過(guò) editRef.value 調(diào)用子組件中的方法
editRef.value.showEdit()
}
return {
showEdit,
// 注意，注意： 這個(gè)editRef 一定要 return 出去
editRef，
}
},
}
</script>
三、provide/inject 父組件跨子組件共享傳參和方法
父組件中定義
provide，發(fā)送參數(shù)
子組件中定義inject，獲取參數(shù)
這里碰到一個(gè)問(wèn)題，provide發(fā)送的數(shù)組對(duì)象inject接收后都是 proxy 類(lèi)型的，需要toRaw將其轉(zhuǎn)移才能調(diào)用。有別的好辦法請(qǐng)留言謝謝~~~
父組件.vue
<template>
</template>
<script>
import { defineComponent, provide, reactive } from 'vue'
export default defineComponent({
name: 'List',
setup() {
const selectRows = reactive({
list: {},
})
// 發(fā)送 selectRows 中數(shù)據(jù)到全局子組件中
provide('selectRows', selectRows)
const refreshData = () => {
........
}
// 共享方法 也是可以的
provide('refreshData', refreshData)
return {}
},
})
</script>
子組件.vue
<template>
</template>
<script>
import { defineComponent, reactive, inject } from 'vue'
export default defineComponent({
name: 'Perssion',
setup() {
// 這里獲取 selectRows 的數(shù)據(jù)
// 這里獲取的是 proxy 類(lèi)型的數(shù)據(jù)，需要toRaw轉(zhuǎn)化為數(shù)組
const row = toRaw(inject('selectRows'))
const refreshData = inject('refreshData')
onMounted(() => {
// 調(diào)用共享的方法
refreshData()
})
}
})
</script>
四、子組件調(diào)用父組件方法 emits
子組件調(diào)用父組件方法，實(shí)際上是子組件調(diào)用父組件傳入子組件的方法。
子組件.vue
<template>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Perssion',
// 設(shè)置需要父組件傳入方法的 key
emits: ['refreshList'],
// 這里需要給 setup 定義兩個(gè)參數(shù)，第二個(gè) { emit } 是調(diào)用父組件方法的方法
setup(props, { emit }) {
onMounted(() => {
// 調(diào)用父組件傳入的方法，val 是可以給方法傳參（可不傳）
emit('refreshList', val)
})
}
})
</script>
父組件.vue
<template>
<!-- 這里的 @refreshList 就是在子組件 emits 中設(shè)置的 key -->
<!-- @refreshList 里面是傳入需要被子組件調(diào)用的方法 -->
<Perssion @refreshList="refreshList" />
</template>
<script>
import { defineComponent } from 'vue'
// 加載組件
import Perssion from '../perssion'
export default defineComponent({
name: 'List',
components: { Perssion },
setup() {
// 定義父組件方法
const refreshList = (val) => {
.......
}
return {
refreshList,
}
},
})
</script>
