首先语法糖是可很优秀的东西,只是之前对其理解不深入
-
本质上语法糖可以自定义用于任何你需要的场景
- 常用的有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>
博客指出语法糖是优秀的,此前理解不深入。它本质上可自定义用于各种场景,常用在input、radio等。以input v-model为例说明用法,还强调子组件要通过$emit向父组件抛事件,由父组件改变value值。
1738

被折叠的 条评论
为什么被折叠?



