vue3的提供注入功能运用:事件广播

啥是提供注入?
示例:
以下代码均写在setup()中
父组件

let search = reactive({
        /**日期范围 */
        dateRange: [] as RangePickerValue,
        /**科室 */
        deptcode: '',
        /**病种 */
        diseasecode: ''
    });
   function loadData() {
   		//改变这个值,触发事件
        call_loaddata_param.trigger++;
    }
   let call_loaddata_param = reactive({
        //触发媒介,子组件监听这个值变化
        trigger: 0,
        search
    });
    //使用 提供/注入 命令子组件做事
    provide('call-loaddata', call_loaddata_param);

子组件

let call_loaddata_param = inject('call-loaddata', {
        trigger: 0,
        search: {
            /**日期范围 */
            dateRange: [] as RangePickerValue,
            /**科室 */
            deptcode: '',
            /**病种 */
            diseasecode: ''
        }
    });
    watch(() => call_loaddata_param.trigger, () => {
        alert(call_loaddata_param.search.dateRange);
    });

这个示例的要表达的功能:
父组件有个搜索框,点击查询按钮后,将参数传递给子组件,并通知子组件执行数据加载

你可能感兴趣的:(web前端,vue)