目录

1、利用父子组件传值

2、利用ref

3、provide和inject

1、利用父子组件传值

父组件：

上线import { defineComponent, ref } from 'vue'import { useRoute } from 'vue-router'import OnlineModal from './onlineModal.vue'export default defineComponent({components: {OnlineModal},setup() {const route = useRoute()const visibleIt = ref(false)const showModal = () => {visibleIt.value = true}return {route,visibleIt,showModal}}})

子组件：

取消确认发布
注意事项
上线时间：19:00-23:00禁止（流量高峰），紧急上线联系开发。
上线间隔：3分钟内只能上线一次，防止新内容过多时执行慢。
上线成功：出现“上线成功”弹窗，即完成本次上线。
上线频率：少量多次，请勿积攒过多新内容，以免影响用户流量。
import {ref } from 'vue'import {postRelease} from '@/services/online'import { message } from 'ant-design-vue';export default ({props:['controlVisible'],setup(props, {emit}) {console.log(props.controlVisible);const loading = ref(false)const handleOk = () => {loading.value = truepostRelease().then( res => {console.log(res, '----');debuggermessage.success('上线成功')loading.value = false }).catch(err => {message.error({title: '错误提示',content: err?.response?.data?.msg || '上线失败'})loading.value = false })emit('closeModal')}const handleCancel = () => {emit('closeModal')}return { loading,handleOk,handleCancel}}})

2、利用ref

父组件：

上线import { defineComponent, ref } from 'vue'import { useRoute } from 'vue-router'import OnlineModal from './onlineModal.vue'export default defineComponent({components: {OnlineModal},setup() {const route = useRoute()const onlineModal = ref(false)const showModal = () => {onlineModal.value.openModal()}return {route,showModal,onlineModal}}})

子组件：

取消确认发布
注意事项
上线时间：19:00-23:00禁止（流量高峰），紧急上线联系开发。
上线间隔：3分钟内只能上线一次，防止新内容过多时执行慢。
上线成功：出现“上线成功”弹窗，即完成本次上线。
上线频率：少量多次，请勿积攒过多新内容，以免影响用户流量。
import {ref } from 'vue'import {postRelease} from '@/services/online'import { message } from 'ant-design-vue';export default ({setup(props, {emit}) {const controlVisible = ref(false)const loading = ref(false)const openModal = () =>{controlVisible.value = true}const handleOk = () => {openModal()loading.value = truepostRelease().then( res => {console.log(res, '----');debuggermessage.success('上线成功')loading.value = falsehandleCancel() }).catch(err => {message.error({title: '错误提示',content: err?.response?.data?.msg || '上线失败'})loading.value = falsehandleCancel() })}const handleCancel = () => {controlVisible.value = false}return { loading,handleOk,openModal,handleCancel,controlVisible}}})

3、provide和inject

在父组件中通过provide暴露属性或方法，子组件通过inject接受，并且只要是父组件的后代，都可以通过inject接收到父组件暴露的值

父组件：

上线import { defineComponent, provide, ref } from 'vue'import { useRoute } from 'vue-router'import OnlineModal from './onlineModal.vue'export default defineComponent({components: {OnlineModal},setup() {const route = useRoute()const controlIfVisible = ref(false)provide('controlIfVisible', controlIfVisible)const showModal = (sonValue) => {controlIfVisible.value = sonValue}provide('handle', showModal)return {route,showModal,controlIfVisible}}})

子组件：

取消确认发布
注意事项
上线时间：19:00-23:00禁止（流量高峰），紧急上线联系开发。
上线间隔：3分钟内只能上线一次，防止新内容过多时执行慢。
上线成功：出现“上线成功”弹窗，即完成本次上线。
上线频率：少量多次，请勿积攒过多新内容，以免影响用户流量。
import { ref, inject } from 'vue'import { postRelease } from '@/services/online'import { message } from 'ant-design-vue'export default {setup(props) {const loading = ref(false)const controlVisible = inject('controlIfVisible')const handle: any = inject('handle')const handleOk = () => {handle(true)loading.value = truepostRelease().then((res) => {console.log(res, '----')debuggermessage.success('上线成功')loading.value = falsehandleCancel()}).catch((err) => {message.error({title: '错误提示',content: err?.response?.data?.msg || '上线失败'})loading.value = falsehandleCancel()})}const handleCancel = () => {handle(false)}return {loading,handleOk,handleCancel,controlVisible}}}