首页 > 其他分享 >vue自定义组件实现v-model双向数据绑定

vue自定义组件实现v-model双向数据绑定

时间:2024-11-01 16:47:51浏览次数:5  
标签:vue 自定义 绑定 num props 组件 model 数据

一、Vue2 实现自定义组件双向数据绑定

① v-model 实现双向数据绑定

  在vue2中,子组件上使用v-model的值默认绑定到子组件的props.value属性上,由于子组件不能改变父组件传来的属性,所以需要通过$emit触发事件使得父组件中数据的变化,然后再同步到子组件。vue2默认触发v-model数据变化的事件为input

使用如下:

子组件MySon

<template>
  <div>
    <div>双向数据绑定:{{$props.value}}</div>
    <div><button @click="addValue">点击++</button></div>
  </div>
</template>
​
<script>
export default {
  name: "MySon",
  props: ['value'],
  methods: {
    addValue() {
      //  触发父组件中v-model绑定数据的变化,由于不能改变props数据中的值,所以不要写this.$props.value++这样的操作
      this.$emit('input', this.$props.value + 1)
    }
  }
}
</script>

如果希望改变接收v-model的属性或改变触发v-model数据变化的事件,可通过model:{}配置实现,如:

<template>
  <div>
    <div>双向数据绑定:{{$props.value666}}</div>
    <div><button @click="addValue666">点击++</button></div>
  </div>
</template>
​
<script>
export default {
  name: "MySon",
  props: ['value666'],
  // --> 配置接收v-model数据的属性以及改变数据的事件 <--
  model: {
    prop: 'value666',
    event: 'updateValue666'
  },
  methods: {
    addValue666() {
      this.$emit('updateValue666', this.$props.value666 + 1)
    }
  }
}
</script>

父组件

<template>
  <div id="app">
    <MySon v-model="num"></MySon>
  </div>
</template>
​
<script>
import MySon from "@/components/MySon.vue";
export default {
  name: 'App',
  components: {
    //注册子组件
    MySon
  },
  watch: {
    //  监视num数据的变化  
    num(newValue, oldValue) {
      console.log('num: ' + oldValue + ' -> ' + newValue)
    },
  },
  data() {
    return {
      num: 10,
    }
  },
}
</script>

② .sync 实现子组件多个数据双向绑定

Vue2中使用v-model只能使用一次,如果要实现多个双向数据绑定,可以借助.sync修饰,使用语法为 :属性.sync="数据" ,用这种绑定代替v-model,触发数据改变的事件为update:属性名

使用如下:

子组件

<template>
  <div>
    <div>sync双向数据绑定:{{$props.data}}</div>
    <div><button @click="addData">点击++</button></div>
  </div>
</template>
​
<script>
export default {
  name: "MySon",
  //    用props.data属性接收双向绑定的数据  
  props: ['data'],
  methods: {
    addData() {
      //    触发 update:data 事件改变父组件中绑定的值   
      this.$emit('update:data', this.$props.data + 1)
    }
  }
}
</script>

父组件

<template>
  <div id="app">
    <!-- 用 :data.sync 将数据双向绑定到子组件的data属性上 -->  
    <MySon :data.sync="num"></MySon>
  </div>
</template>
​
<script>
import MySon from "@/components/MySon.vue";
export default {
  name: 'App',
  components: {
    MySon
  },
  watch: {
    num(newValue, oldValue) {
      console.log('num: ' + oldValue + ' -> ' + newValue)
    }
  },
  data() {
    return {
      num: 10
    }
  },
}
</script>

至于为什么子组件要通过$emit('update:属性名', 数据);来触发父组件数据变化,原因如下:

<MySon :data.sync="num"></MySon>
          ||
          \/
        等价于
<MySon :data="num" @update:data="(newData) => {num = newData}"></MySon>

二、Vue3 实现双向数据绑定

在Vue3中,v-model可以实现多个数据双向数据绑定,同时.sync修饰符已经不再生效。

① v-model 实现双向数据绑定

vue3中子组件上使用v-model绑定的数据默认传到子组件的props.modelValue属性上(vue2是props.value属性),并且默认触发数据变化的事件为update:modelValuevue2为input

使用如下:

子组件

<template>
  <div>
    <div>双向数据绑定modelValue:{{props.modelValue}}</div>
    <div><button @click="addModelValue">点击++</button></div>
  </div>
</template>
<script setup>
  //    props.modelValue接收v-model绑定的数据
  const props = defineProps(['modelValue'])
  const emit = defineEmits(['update:modelValue'])
  function addModelValue(){
    //  触发父组件中双向绑定数据的变化
    emit('update:modelValue', props.modelValue + 1)
  }
</script>

父组件

<template>
  <Son v-model="num"></Son>
</template>
​
<script setup>
  import {ref, watch} from "vue";
  import Son from "@/components/Son.vue";  
    
  const num = ref(0)
  //    监视num数据变化
  watch(num, (newValue, oldValue) => {
    console.log('num: ' + oldValue + '->' + newValue)
  })
</script>

v-model: 属性 实现多个数据双向绑定

数据绑定语法:v-model:属性="数据"

触发数据变化的事件:update:属性

使用如下:

子组件

<template>
  <div>
    <div>双向数据绑定data:{{props.data}}</div>
    <div><button @click="addData">点击++</button></div>
  </div>
</template>
​
<script setup>
  const props = defineProps(['data'])
  const emit = defineEmits(['update:data'])
  const addData = () => {
    emit('update:data', props.data + 1)
  }
</script>

父组件

<template>
  <!-- 将num数据绑定到子组件的data属性上 -->
  <Son v-model:data="num"></Son>
</template>
<script setup>
  import {ref, watch} from "vue";
  import Son from "@/components/Son.vue";
  const num = ref(0)
  watch(num, (newValue, oldValue) => {
    console.log('num: ' + oldValue + '->' + newValue)
  })
</script>

标签:vue,自定义,绑定,num,props,组件,model,数据
From: https://blog.csdn.net/weixin_74261199/article/details/143362620

相关文章

  • 基于nodejs+vue基于的农贸市场网站的设计与实现[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于农贸市场网站的设计与实现问题的研究,现有研究主要以农贸市场的实体运营、传统管理模式为主,专门针对基于特定功能的农贸市场网站设计与实现的研究较......
  • 基于nodejs+vue基于的汽车租赁系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于汽车租赁系统的研究,现有研究多集中在系统的基本功能构建与运营模式方面,如迪蒙汽车租赁系统,其主要关注如何通过多网融合来拓展业务模式,提高运营效率......
  • 基于nodejs+vue基于的社区问答网站与设计[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于社区问答网站的研究,现有研究多集中在其社交性和信息传播方面1。在国外,社区问答网站发展较早,技术和运营模式相对成熟,注重用户体验和信息的个性化推荐......
  • AI大模型高效开发神器来了 ,解读ModelArts 8大能力
    随着国资委、工信部等持续推动工业企业开展人工智能创新应用,以及AI大模型为代表的新一代AI技术在快速发展,赋能各行各业,开展AI的创新应用对领先的工业企业已经是必答题。,在IDC《中国工业AI综合解决方案2024年厂商评估》中,华为在战略、能力、市场份额三个维度取得第一,位于领导者类别......
  • 基于node.js+vue基于Android的答疑预约系统的设计与实现前(开题+程序+论文)计算机毕业设
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容选题背景关于答疑预约的研究,现有研究主要集中在传统的线下答疑预约或者基于网页端的答疑预约方式,专门针对基于Android平台的答疑预约系统的研究较少。随着移动设备的......
  • 基于node.js+vue机械产品工程图纸管理系统(开题+程序+论文)计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容选题背景关于机械产品工程图纸管理的研究,现有研究主要集中在传统纸质图纸管理和基本的电子文档管理系统上,专门针对集成化、智能化的工程图纸管理系统的探讨相对较少......
  • 基于node.js+vue基于Android的服装搭配APP(开题+程序+论文)计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于服装搭配的研究,现有研究主要以线下实体店搭配建议或时尚杂志推荐为主,专门针对基于Android平台开发服装搭配APP的研究较少。在国内外,虽然有一些关于......
  • POLIR-Mind-Cognition-Neural Models-NLP(Neural Logic Levels) 思维逻辑层级-能给你
    百知思维模型-NLP理解层次能给你无敌洞察力https://v.douyin.com/iS74bMKr/POLIR-Mind-CognitionNeuralModelsNLP(NeuralLogicLevels)思维逻辑层级能给你无敌洞察力GregoryBertson(格雷歌理,贝特森)RobertDiertz(罗伯特,迪尔磁)终于在1991年成为理解问题和解决问题......
  • 自定义 legend 颜色
    legend:[{data:[{name:'Excellent',itemStyle:{color:'rgb(147210243/50%)'}},{name:'Good',itemStyle:{......
  • Vue基础知识——async指令、scope和样式穿透
    .sync在 Vue.js中,.sync 修饰符是一种语法糖,用于简化父子组件之间的双向数据绑定。它主要用在子组件向父组件发送更新某个prop的事件时。在Vue2.3.0+版本中,.sync 修饰符被重新引入(之前在Vue1.x中存在,但在Vue2.0中被移除了),用于替代之前需要手动监听事件并更新父......