vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 defineModel父子组件绑定

vue3使用defineModel实现父子组件双向绑定

作者:一天只码五十行

这篇文章主要个给大家介绍了在vue3中使用defineModel进行父子组件中的双向绑定,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

在vue3.4版本中,defineModel进入稳定版。我们可以使用defineModel来优化父子组件中的双向绑定。在3.3之前的版本中,双向绑定需要在使用props和emits传值,现在我们只需要一行代码就可以解决这个问题:const 变量名=defineModel()

在子组件Helloworld.vue中:

<template>
  <div class="page">
    <input
      type="text"
      :value="fonts"
      @input="(e:any) => (fonts= e.target.value)"
      size="large"
      class="inputBox"
    />
  </div>
</template>
 
<script lang="ts" setup>
import { defineModel } from "vue";
const fonts = defineModel();
</script>
<style scoped lang="less">
.page {
  width: 600px;
  height: 150px;
}
</style>

在父组件中:

<template>
  <div class="home">
    <div class="mian">
      <div class="text">{{ fonts }}</div>
      <HelloWorld v-model="fonts" />
    </div>
  </div>
</template>
 
<script lang="ts" setup>
import HelloWorld from "@/components/HelloWorld.vue";
import { ref } from "vue";
const fonts = ref<string>("aaa");
</script>
<style>
.home {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

再看看效果

以上就是vue3使用defineModel实现父子组件双向绑定的详细内容,更多关于vue3 defineModel父子组件绑定的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文