当前位置: 首页> 游戏> 评测 > vue3 中v-model语法糖(2024-06-21)

vue3 中v-model语法糖(2024-06-21)

时间:2025/7/11 8:50:43来源:https://blog.csdn.net/hap1994/article/details/139848128 浏览次数:0次

一、 vue2 中 v-model 语法糖

实现父子组件双向数据绑定,一个输入框或者组件指定绑定一个 v-model

1. 父组件写法

<template><div><h1>App</h1><h2>{{ count }}</h2><input type="text" v-model="count" /><!-- 展开写法,@input中的 count 的值来自当前输入框事件 --><input type="text" :value="count" @input="count = $event.target.value" /><hr /><Children v-model="count"></Children><!-- 展开写法,@input中的 count 的值来自子组件输入框中的值 $event.target.value --><Children :value="count" @input="count = $event"></Children></div>
</template><script>
import Children from "@/components/Children.vue";
export default {components: {Children,},data() {return {count: "1",};},
};
</script>

2. 子组件写法

<template><div><h1>main</h1><div>{{ value }}</div><inputtype="text":value="value"@input="$emit('input', $event.target.value)"/></div>
</template><script>
export default {props: {value: {type: String,},},
};
</script>

二、 vue2 的 v-bind.sync 修饰符语法糖,实现父子组件双向数据绑定

注意:子组件标签中可以同时使用多个 .sync 修饰符

1. 在父组件中

<template><div><h1>App</h1><input v-model="count" type="text" /><hr /><Children :count.sync="count"></Children><!-- 展开写法,@update:value中的 count 的值来自子组件输入框中的值 $event.target.value --><Children :count="count" @update:count="count = $event"></Children></div>
</template><script>
import Children from "@/components/Children.vue";
export default {components: {Children,},data() {return {count: "1",};},
};
</script>

2. 在子组件中

<template><div><h1>main</h1><h2>{{ count }}</h2><inputtype="text":value="count"@input="$emit('update:count', $event.target.value)"/></div>
</template><script>
export default {props: {count: {type: String,},},
};
</script>

三、 vue3 的 v-model 语法糖

  1. vue3 中的 v-model 相当于 vue2 中的 v-model 和 v-bind.sync 修饰符组合在一起的产物(择优整合)
  2. v-bind.sync 在 vue3 中被移除了
  3. 可以在组件标签上使用多个 v-model 绑定属性,使用参数区分

1. 在父组件中

<template><div><h1>App</h1><h2>{{ count }}</h2><input type="text" v-model="count" /><!-- 此展开写法,仅限于输入框 --><input type="text" :value="count" @input="count = $event.target.value" /><hr /><Children v-model:count="count"></Children><!-- 此展开写法,仅限于组件 --><Children :count="count" @update:count="count = $event"></Children></div>
</template><script>
import Children from "@/components/Children.vue";
import { ref } from "vue";export default {components: {Children,},setup() {const count = ref("1");return { count };},
};
</script>
2. 在子组件中
<template><div><h1>main</h1><div>{{ count }}</div><label>count:<inputtype="text":value="count"@input="emit('update:count', $event.target.value)"/></label></div>
</template><script>
export default {props: {count: {type: String,},},setup(props, { emit }) {console.log(props);return { emit };},
};
</script>


 

关键字:vue3 中v-model语法糖(2024-06-21)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: