vue双向数据流
Vue 双向 数据流
2023-09-11 14:17:27 时间
vue支持双向数据流吗?
除了最开始angularJs支持数据的双向流动之外,其他两大框架是均不支持的
vue之所以被常说数据流,其实是错误的。是因为它是双向绑定被有些人理解为双向数据流。
如果发现了一下的错误信息,那就是你违反了不能双向数据流的规定
vue.runtime.esm.js?2b0e:619 [Vue warn]:
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.
Instead, use a data or computed property based on the prop's value. Prop being mutated: "userName"
双向数据流的利弊
首先肯定,弊肯定是大于利的,不然vue直接就支持‘双向数据流’了。
弊端是数据流动不可追踪,无法保证数据源的唯一性,一旦出现问题很难找到错误的位置。
优点是有的时候,在某些特定的场景下,会很方便。比如封装的弹窗显隐控制,表单数据等。
vue如何使用双向数据流
1、props传入引用类型
vue检测props只能检测基本类型的值,而对于复合类型(即对象),只能检测引用地址有没有变化,而属性值变化,不会被加测到。
利用这一特性,我们可以偷偷的绕过“props是只读的”这一检测,来达到“双向数据流”目的。
子组件
<template> <div class="hello"> 姓名:<input type="text" v-model="formData.name"><br/> 年龄:<input type="text" v-model="formData.age"> </div> </template> <script> export default { name: 'userInfo', props: { formData: Object } } </script>
父组件
<template> <div id="app"> <user-info :formData="userInfoForm"/> <button @click="getUserInfoForm">提交</button> </div> </template> <script> import UserInfo from './components/user-info.vue'; // 用户信息表单 export default { name: 'app', components: { UserInfo }, data(){return{ userInfoForm:{ name:'小丁', age: 20 } }}, methods:{ getUserInfoForm(){ console.log(this.userInfoForm); } } } </script>
效果图
2.利用.async来支持双向数据流(原自定组件使用v-model)
父组件
<template> <div class="hello"> 姓名:<input type="text" :value="userName" @input="userNameChange"><br/> </div> </template> <script> export default { name: 'userInfo', props: { userName: String }, methods:{ userNameChange(e){ // 会直接修改父组件的数据 this.$emit('update:userName', e.target.value) } } } </script>
子组件
<template> <div class="hello"> 姓名:<input type="text" :value="userName" @input="userNameChange"><br/> </div> </template> <script> export default { name: 'userInfo', props: { userName: String }, methods:{ userNameChange(e){ // 会直接修改父组件的数据 this.$emit('update:userName', e.target.value) } } } </script>
原理
<user-info :userName.sync="userNameVal"/> <!-- 会被扩展为: --> <user-info :userName="userNameVal" @update:userName="val => userNameVal = val"/> 当子组件需要更新 userName 的值时,它需要显式地触发一个更新事件: this.$emit('update:userName', newValue)
相关文章
- Vue_(组件通讯)子组件向父组件传值
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- Vue双向数据绑定原理分析(转)
- vue开发 - 将方法绑定到window对象,给app端调用
- [Vue @Component] Handle Errors and Loading with Vue Async Components
- vue.js3: base64编码/解码(vue@3.2.37)
- vue的props和$attrs
- [Vue] Get up and running with vue-router
- vue项目怎么进行seo的优化白屏太久怎么处理?
- Kbone基础 - [05] Kbone + Vue 项目手工搭建流程
- npm install vue@next安装最新vue版本
- vue element-ui 分页组件封装
- Vue学习之--------消息订阅和发布、基础知识和实战应用(2022/8/24)
- Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
- Vue实战狗尾草博客管理系统第一章
- 209:vue+openlayers 绘制矩形,拖拽编辑Modify后仍然为矩形
- 208:vue+openlayers 监听瓦片地图加载情况,200、403及其他状态码的处理示例
- 200:vue+openlayers 添加删除多边形,modify feature,双向互动颜色显示
- 196:vue+openlayers 滑动某feature高亮,修改此feature的样式
- RequireJS 也可以引入 VUE
- 如何在vue组件中引入外部的css和js文件
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- 基于Java+SpringBoot+Vue前后端分离电影院售票订票系统设计与实现(有演示视频)
- Vue:第一个vue-cli项目
- Vue双向绑定及Vue组件