vue中子父组件双向绑定[非监听写法] v-model vue3中双向绑定写法

子父组件双向绑定
一般是写法：
由父组件定义[源值] 传给子组件 子组件使用props来接受来自父组件的值
每次子组件修改相应的值时，需要传给父组件再进行接受修改父组件[源值]

新写法：

//使用子组件
//使用v-model:自定义值="源值" 来进行传参
<gl-input v-model:value="inputValue"></gl-input>

子组件代码

<template>
  <div>
    <ElInput :model-value="value" @input="change"><slot /></ElInput>
  </div>
</template>

<script>
import { ElInput } from "element-plus"
export default {
  name: "GlInput",
  components: { ElInput },
  props: {
    value: {
      type: String,
      default: "nihao"
    }
  },
  emits: ["update:value"],
  data() {
    return {}
  },
  methods: {
    change(e) {
      console.log(e)
      this.$emit("update:value", e)
    }
  }
}
</script>

<style></style>

每次子组件修改值直接返回给父组件 使用这种方式父组件不需要再重新接收子组件emit函数再次修改源值 可直接修改父组件源值