自定义组件事件处理（包括自定义组件的v-model ）-526互联

点击事件在组件内判断处理事件

点击事件把子组件的事件抛出，在父组件中处理

可以通过传方式在子组件内调用方法处理

父组件 调用 子组件
<risk-qa-form
      :item="selectedItem"
      v-if="riskQaFormModalVisible"
      v-model="riskQaFormModalVisible"
      :func="test"
    ></risk-qa-form>

方法
methods: {
    test() {
      alert(1);
    },}

子组件
props: {
    
    func: {
      type: Function,
    },
  },

调用也是在methods里面
this.func();

自定义组件的v-model

组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。
大概案例简单写写

父组件 调用 子组件------这里的是个弹框
<modal-risk-evaluation-vue
      v-if="visibleRiskEvaluation"
      v-model="visibleRiskEvaluation"
    >
</modal-risk-evaluation-vue>

data（）return 里面
visibleRiskEvaluation: false,

点击其他事件的时候
   showRiskEvaluation() {
      this.visibleRiskEvaluation = true;
    },

子组件
 <a-modal
    :visible="value"
    @cancel="clickcancel()"
  ></a-modal>

  props: {
    value: {
     -------------------------这里的value是外面v-model默认的visibleRiskEvaluation
      type: Boolean,
      require: false,
    },
  },

clickcancel() {
      this.$emit("input", false);
     ----------------------------------这里的input也是默认的事件 让外面的visibleRiskEvaluation=false
    },