vue3:组件通信v-model式写法

v-model作为vue中一个非常出色语法糖，帮助我们在开发的过程中省略了很多的麻烦，在进行组件通信的过程中，我们也可以用v-model帮助我们进行一些省事的操作！

首先说一下我的需求，子组件是一个输入框，每在子组件中输入一段话，父组件中就多一条记录，我采用了element-plus的UI组件库，大概页面是长这个样子！

 做法有很多种，这里为了展示v-model的用法，我采用了在子组件中把数据组成数组，再返回至父组件，父组件直接渲染即可，先看看正常的采用props，emit的写法

正常的采用props，emit的写法

父组件

<template>
  <child :list="list" @confirm="confirm"></child>
  <div>
    <h3 v-for="(item,index) in list" :key="index">{{ item }}</h3>
  </div>
</template>

<script setup>
import Child from "./components/Child";
import {ref} from "vue";

const list = ref([])

function confirm(e) {
  list.value = e
  console.log(list.value)
}
</script>

子组件

<template>
  <el-input
      v-model="input"
      placeholder="Please input"
  >
    <template #append>
      <el-button @click="confirm">确认</el-button>
    </template>
  </el-input>

</template>

<script setup>
import {ref, defineProps, defineEmits} from "vue"
import {ElMessage} from "element-plus";

const input = ref('')

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})

const emits = defineEmits(['confirm'])

function confirm() {
  if (input.value) {
    const arr = JSON.parse(JSON.stringify(props.list))
    arr.push(input.value)
    emits("confirm", arr)
    input.value = ''
  } else {
    ElMessage({
      message: '请输入内容',
      type: 'warning',
    })
  }
}
</script>

我们只是在父组件的confirm中进行了赋值的操作，所以我们还可以去掉confirm方法，直接在组件中这么写

<child :list="list" @confirm="list = $event"></child>

下面，我们要把写法改成v-model的写法，先看代码

v-model写法

子组件---我们其实只改了一处地方，那就是新建了一个emit事件：update:list

<template>
  <el-input
      v-model="input"
      placeholder="Please input"
  >
    <template #append>
      <el-button @click="confirm">确认</el-button>
    </template>
  </el-input>

</template>

<script setup>
import {ref, defineProps, defineEmits} from "vue"
import {ElMessage} from "element-plus";

const input = ref('')

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits(['update:list'])

function confirm() {
  if (input.value) {
    const arr = JSON.parse(JSON.stringify(props.list))
    arr.push(input.value)
    emits("update:list", arr)
    input.value = ''
  } else {
    ElMessage({
      message: '请输入内容',
      type: 'warning',
    })
  }
}
</script>

父组件--我们直接 v-model:list="list"

<template>
  <child v-model:list="list"></child>
  <div>
    <h3 v-for="(item,index) in list" :key="index">{{ item }}</h3>
  </div>
</template>

<script setup>
import Child from "./components/Child";
import {ref} from "vue";

const list = ref([])
</script>

总结：说说用法，在子组件中我们需要定义props和 emits，添加完成后emit指定事件，传递内容；需要注意的是，update:*是Vue中的固定写法，后我们就可以v-model:*= "某值"，*代表props中的某个属性名；

因为使用的不经常，特此记录！