【vue3】组件间通讯

1.上级传给下级

父级组件：

<ReqTab ref="crontabRef" @hide="openCron=false" @fill="crontabFill" :expression="expression" :method="method" ></ReqTab>

函数中赋值：

子组件：

const props = defineProps({
    hideComponent: {
        type: Array,
        default: () => [],
    },
    expression: {
        type: String,
        default: ""
    },
    method: {
      type: String,
      default: ""
  }
})

引用：props.expression

2.子组件更新数据到父组件

父组件：
<ReqTab ref="crontabRef" @hide="openCron=false" @fill="crontabFill" :expression="expression" :method="method" ></ReqTab>

注意：@fill="crontabFill"

/** 确定后回传值 */
function crontabFill(value) {
  formCase.value.request = value;
}

子组件：

const emit = defineEmits(['hide', 'fill'])

// 由子组件触发，更改表达式组成的字段值
function updateCrontabValue(value) {
  emit("fill", value)
}

3.监听器，作用：监控数据变化，无需按钮

<el-input type="textarea" v-model="nums" :autosize="{ minRows: 4, maxRows: 4}"/>

const emit = defineEmits(['update'])

watch(nums,(newValue,oldValue) => {
  console.log('newValue:',newValue);
  emit('update', newValue);
});

4.子组件数据传输：监听器监控数据变化后，把值传给update，update传给fill，fill更新最终的父组件数据：formCase.value.request