# 常用筆記
### 兒子發送事件給父親

const emit = defineEmits<{
  (e: 'update:modelValue', value: any): void;
  (e: 'onSelectEnd', select: number[]): void;
}>();

const onChange = (value: number[]) => {
  emit('onSelectEnd', value);
  emit('update:modelValue', value);
};

### 封裝組件雙向綁定v-model
#### 兒子

<template>
    <div >
        <input type="text" v-model="inputData">
    </div>
</template>
<script>
export default {
    model:{
        prop:"value",       // 定義v-model接收到的變數名
        event:"eventChange" // 定義v-model修改新值的事件名
    },
    props:{
        value:{
            type:String,
            value:""
        }
    },
    data() {
        return {
            inputData:this.value,
        }
    },
    watch: {
        inputData(newValue) {
            this.$emit("eventChange",newValue);
        }
    },
}
</script>

#### 父親

<my-input v-model="bindData"></my-input>

### 具名slot用法
兒子

<slot name="footer">Default Footer</slot>

父親

<ChildComponent>
    <template v-slot:header>
    </template>
</ChildComponent>

### sync用法
父子組件溝通時,兒子可利用emit向父親發送事件數據
有時候父子共用同一個參數,並且名稱一樣,
兒子則可以利用sync來做到父子同步

#### 首先兒子需要emit去向父親溝通

this.$emit('update:openModal',false);

#### 父親則需要以下寫法去接收

<LoginModal
 :openModal="openModal"
 @update:openModal="val => openModal= val"
></LoginModal>

#### 但是這樣寫法其實很冗長,父親寫法可以直接改成

<LoginModal
  :openModal.sync="openModal" 
></LoginModal>

#### 限制input只能輸入整數
oninput ="value=value.replace(/[^\d]/g,'')" //只能输入数字

oninput ="value=value.replace(/[^0-9.]/g,'')" //只能输入数字和小数

<el-input v-model="sjje" oninput ="value=value.replace(/[^0-9.]/g,'')" class="money sjje">
	<span slot="suffix">/ 元 </span>
</el-input>    

#### el-checkbox阻止冒泡事件

<el-checkbox 
@click.native='stopDefault($event)'>
</el-checkbox>

// js
stopDefault (e) {
  e.stopPropagation()
}

### el-input 阻擋冒泡事件
<el-input
@click.stop.native=""
@keyup.enter.native.stop=""
>
</el-input>

### vue 綁定style處理hover寫法

<div  class="test" 
:style="optionBlockItemLabelHover"> 
    登出 
</div>

  optionBlockItemLabelHover() {
    return { '--activeColor': '#fff' };
  },

  .test {
    &:hover {
      color: var(--activeColor);
    }
  }