目录

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 = true
      postRelease().then( res => {
        console.log(res, '----');
        debugger
        message.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 = true
      postRelease().then( res => {
        console.log(res, '----');
        debugger
        message.success('上线成功')
        loading.value = false
        handleCancel()
     }).catch(err => {
        message.error({
            title: '错误提示',
            content: err?.response?.data?.msg || '上线失败'
        })
        loading.value = false
        handleCancel()
     })
    }
    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 = true
      postRelease()
        .then((res) => {
          console.log(res, '----')
          debugger
          message.success('上线成功')
          loading.value = false
          handleCancel()
        })
        .catch((err) => {
          message.error({
            title: '错误提示',
            content: err?.response?.data?.msg || '上线失败'
          })
          loading.value = false
          handleCancel()
        })
    }
    const handleCancel = () => {
      handle(false)
    }
    return {
      loading,
      handleOk,
      handleCancel,
      controlVisible
    }
  }
}