组件封装

# defineProps

defineProps只能在<script setup>中使用，用来接收props

// 仅<template> 中使用 propA、propB
defineProps({
  propA: { type: [Number, String], default: '' },
  propB: { type: Number, default: 2 }
});

// <script> 中也使用 propA、propB, 声明为变量
const props = defineProps({
  propA: { type: [Number, String], default: '' },
  propB: { type: Number, default: 2 }
});

1
2
3
4
5
6
7
8
9
10
11

# defineEmits

用来定义子组件可接收的事件

// 父组件
<children @onClick="handleClick"/>

// 子组件
<template>
  <div @click="onClick">children</div>
</template>

<script setup>
  // 定义emit
  const emit = defineEmits(["onClick"]);
  // 调用父对应回调
  const onClick = () => emit("onClick");
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# v-model

v-model原理

// 父组件
<template>
  <children :msg="msg" @update:msg="handleChangeMsg"/>
</template>

<script>
  export default {
    data:{
      msg: 'hello,coder'
    },
    methods: {
      handleChangeMsg(v){
        this.msg = v
      }
    }
  }
</script>


// 子组件children
<template>
  <div>{{msg}}</div>
  <button @click="handleClick">点击</button>
</template>

<script>
  export default {
    props:['msg'],
    emits:['update:msg'],
    methods:{
      handleClick(){
        this.$emit('update:msg','hello，world');
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

当我们绑定一个state时，默认会绑定一个事件，比如

v-model:open="open"
会默认绑定一个事件@update:open="(v) => open = v"
v-model默认绑定value，其他值加:，如：v-model:open=""

使用v-model封装组件，vue3

// 父组件
<template>
  <children v-model:msg="msg"/>
</template>

<script>
  export default {
    data:{
      msg: 'hello,coder'
    },
  }
</script>


// 子组件children
<template>
  <div>{{msg}}</div>
  <button @click="handleClick">点击</button>
</template>

<script setup>
  defineProps({
    msg: { type: [String], default: '' },
  });
  const emit = defineEmits();
  
  const handleClick(){
    emit('update:msg','hello，world');
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

v-model默认传值
v-model默认传值为modelValue,二次封装el-dialog

<el-dialog :modelValue="visible"  @close="cancel" >
</el-dialog>
<script>
const emits = defineEmits()
// 取消编辑
const cancel = () => {
  resetForm()
  emits('update:visible',false)
}
</script>

1
2
3
4
5
6
7
8
9
10

如果封装el-dialog子组件也用v-model="visible"，打包时会报Use a v-bind binding combined with a v-on listener that emits update:x event instead错误
参考

编辑

上次更新: 2023/01/05

← 实现页面缓存 nextTick→