message与modelValue有什么区别?

<div id="app">
  <my-component v-model.capitalize="message"></my-component>
  {{ message }}
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({
  data() {
    return {
      message: ''
    }
  }
});
    app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },

  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  },
  template: `
  <div>
  <input
      type="text"
      :value="modelValue"
      @input="emitValue">
      </div>
      `

    });
app.mount('#app')
</script>

message也能出来

为什么modelValue也可以,都可以啊?
这两个是相等吗?

<div id="app">
  <my-component v-model.capitalize="message"></my-component>

</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({
  data() {
    return {
      message: ''
    }
  }
});
    app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },

  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  },
  template: `
  <div>
  <input
      type="text"
      :value="modelValue"
      @input="emitValue">
      <label> {{ modelValue }}</label>
      </div>
      `

    });
app.mount('#app')
</script>

attrs
update:modelValue(message=$event)

attrs代表什么?

props
modelModifiers: object
capitalize:true
modelValue:“fffffff”

default函数,就是capitalize函数吗?
应该是的

上一篇:vue3学习笔记五:v-model使用


下一篇:vue3:自定义组件之v-model父子组件双向绑定