一、父组件给子组件传参 props
props用法vue props:{ xxxx: { type: Object, default:null } }
以下有注释的部分是需要写的代码
以下例子是父组件（列表页）加载公共的操作按钮
子组件.vue
以设置权限为例
<template>
<vab-query-form-left-panel :span="12">
<el-button
:disabled="buttonDis.disPerssion"
icon="el-icon-plus"
type="primary"
@click="showSetPermission"
>
设置权限
</el-button>
</vab-query-form-left-panel>
</template>
<script>
import { ref, toRefs, reactive } from 'vue'
export default {
name: 'FunctionArea',
// 定义父组件 html 传参时的 key 名字
// 在父组件中 listData 的写法变为 list-data
props: { listData: { type: Object, default: null } },
setup(props) {
const state = reactive({
// 将从父组件中获取的 listData 的值付给新的变量
// 通过 props 调用
buttonDis: props.listData,
})
return {
...toRefs(state),
}
},
}
</script>
父组件.vue
<template>
<div class="user-management-container">
<vab-query-form>
<!-- 这里 :list-data 给子组件传参数 -->
<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',
// 注册组件
components: { FunctionArea },
setup() {
const selectRows = reactive({
list: {},
})
// 按钮是否禁用的状态，把这个传给子组件
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),
// 把要传给子组件的参数，返回到模板中
buttonDis,
}
},
})
</script>
二、父组件调用子组件方法
关键步骤都在父组件中。
- 在 html 中加载组件 html，然后在 html 中添加
ref='xxx'- 获取子组件对象
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,
})
// 这个是父组件要调用的方法
const showEdit = () => {
state.dialogFormVisible = true
}
const close = () => {}
const save = () => {}
return {
...toRefs(state),
// 这里要返回
showEdit,
close,
save,
}
},
})
</script>
父组件.vue
父组件调用子组件的显示弹框方法 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',
// 注册子组件
components: { AdminEdit },
setup(props) {
// 声明子组件对象
// 注意，注意：这里的 editRef 与上面 html中 ref 值相同
const editRef = ref(null)
const showEdit = () => {
// 通过 editRef.value 调用子组件中的方法
editRef.value.showEdit()
}
return {
showEdit,
// 注意，注意： 这个editRef 一定要 return 出去
editRef，
}
},
}
</script>
三、provide/inject 父组件跨子组件共享传参和方法
父组件中定义
provide，发送参数
子组件中定义inject，获取参数
这里碰到一个问题，provide发送的数组对象inject接收后都是 proxy 类型的，需要toRaw将其转移才能调用。有别的好办法请留言谢谢~~~
父组件.vue
<template>
</template>
<script>
import { defineComponent, provide, reactive } from 'vue'
export default defineComponent({
name: 'List',
setup() {
const selectRows = reactive({
list: {},
})
// 发送 selectRows 中数据到全局子组件中
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 的数据
// 这里获取的是 proxy 类型的数据，需要toRaw转化为数组
const row = toRaw(inject('selectRows'))
const refreshData = inject('refreshData')
onMounted(() => {
// 调用共享的方法
refreshData()
})
}
})
</script>
四、子组件调用父组件方法 emits
子组件调用父组件方法，实际上是子组件调用父组件传入子组件的方法。
子组件.vue
<template>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Perssion',
// 设置需要父组件传入方法的 key
emits: ['refreshList'],
// 这里需要给 setup 定义两个参数，第二个 { emit } 是调用父组件方法的方法
setup(props, { emit }) {
onMounted(() => {
// 调用父组件传入的方法，val 是可以给方法传参（可不传）
emit('refreshList', val)
})
}
})
</script>
父组件.vue
<template>
<!-- 这里的 @refreshList 就是在子组件 emits 中设置的 key -->
<!-- @refreshList 里面是传入需要被子组件调用的方法 -->
<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>
