vue 语法糖使用

最新推荐文章于 2025-09-23 08:15:54 发布

原创最新推荐文章于 2025-09-23 08:15:54 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#语法糖

js 专栏收录该内容

34 篇文章

订阅专栏

博客指出语法糖是优秀的，此前理解不深入。它本质上可自定义用于各种场景，常用在input、radio等。以input v-model为例说明用法，还强调子组件要通过$emit向父组件抛事件，由父组件改变value值。

首先语法糖是可很优秀的东西，只是之前对其理解不深入

本质上语法糖可以自定义用于任何你需要的场景
常用的有input radio checkbox select等
用法例如用于input v-model
注意子组件要通过$emit向父组件抛事件，不可直接在子组件改变value值。要抛向父组件，通过父组件改变value值

<input @input="$event" :value="value">
缩写为
<input v-model="value">

我是用于封装组件element  el-input为例
子组件inputText
<el-input
      :style="{'width':width+'px'}"
      :value="value"
      :placeholder="placeholder"
      :type="mold"
      :disabled="disabled"
      clearable
      @input="input"/>

    export default {
       name: '',
       model: {
          prop: 'value',
          event: 'input'
       },
      props: {
        value: {
          type: String,
          default: ''
        },
        placeholder: {
          type: String,
          default: ''
        },
        type: { // 赋值方法
          type: Number,
          default: 0
        },
      }
    }
methods: {
    input(value) {
      this.$emit('input', value)
    }
}


父组件使用，这里的v-model直接就是获取到的值   v-model ==>   @input="$event" :value="value"
<inputText
              :title-label="'备注'"
              :placeholder="'请输入备注信息'"
              v-model="AddStoreForm.Memo"
              :mold="'textarea'"
              :width="410"
              :title-width="48"
              :flex="'hl'"
              class="mt22"/>

其他语法糖

: ==> v-bind    @click ==>on:click
<!--等同于-->
<img  :src="imagegUrl">
<img v-bind:src="imagegUrl">

v-on 可以直接用"@"来描述:
<button v- on:click="handleClose">点击</button>
<!--等同于-->
<button @click="handleClose">点击隐藏</button>