---
# System prepended metadata

title: 常用筆記

---

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

``` js=
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
#### 兒子
``` vue=
<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>
```
#### 父親
``` html=
<my-input v-model="bindData"></my-input>
```

### 具名slot用法
兒子
``` html=
<slot name="footer">Default Footer</slot>
```
父親
``` html=
<ChildComponent>
    <template v-slot:header>
    </template>
</ChildComponent>
```

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

#### 首先兒子需要emit去向父親溝通
``` javascript
this.$emit('update:openModal',false);
```

#### 父親則需要以下寫法去接收
``` html
<LoginModal
 :openModal="openModal"
 @update:openModal="val => openModal= val"
></LoginModal>
```

#### 但是這樣寫法其實很冗長,父親寫法可以直接改成
``` html
<LoginModal
  :openModal.sync="openModal" 
></LoginModal>
```

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

oninput ="value=value.replace(/[^0-9.]/g,'')" //只能输入数字和小数
``` html=
<el-input v-model="sjje" oninput ="value=value.replace(/[^0-9.]/g,'')" class="money sjje">
	<span slot="suffix">/ 元 </span>
</el-input>    
```

#### el-checkbox阻止冒泡事件
```html=
<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寫法
``` html=
<div  class="test" 
:style="optionBlockItemLabelHover"> 
    登出 
</div>
```

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

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