前端框架Vue父子组件数据双向绑定的实现

目录
  • 一、父子组件单向传值
    • 1、父向子传值
    • 2、子向父传值
  • 二、父子组件数据双向绑定

实现思路:

父 向 子 组件传值:使用 props 属性。( props property[属性] 的复数简写 )
子 向 父 组件传值:使用自定义事件。

一、父子组件单向传值

1、父向子传值

父向子组件传值,子组件接收到数据之后,保存到自己的变量中。

//父组件写法
<cld :numP="num" ></cld> 

//子组件定义以及数据
components:{
 cld:{
  template:'#child',
  props:{
   numP:Number
  },
 }
} 

//子组件内容
<template id="child">
 <div>
  {{ numP }}
 </div>
</template>

props 用于接收父组件传过来的值,props 的写法有很多种,具体如:

//方式1 :  直接接收数据
props: [ 'numP' ] 

//方式2: 加类型限制
props: [
 numP: Number
 ]  

//方式3:添加默认值
props: [
 numP: {
  type:Number,
  default:0
  }
]  

//方式4:是否必须值限制
props: [
 numP: {
  type:Number,
  default:0,
  require:true //添加必须值,不传此值会报错
 }
]  

//方式5:采用对象形式
props: {
 numP: {
  type:Number,
  default:0,
 }
}

2、子向父传值

子向父组件传值,主要通过自定义事件进行传值,具体实例如下:

// 父组件内容
<div>
 子组件获取到的数据{{getNum}}
 <cld :numb="num" @accept="getNumC"></cld>
</div> 

//父组件方法
methods:{
 getNumC(data){
  this.getNum = data //接收子组件传的数据
 }
},
//子组件定义
components:{
 cld:{
  template:'#child',
  data(){
   return{
    numC:1314 //子组件数据定义
   }
  },
  mounted(){
    this.$emit( 'accept' , this.numC ) // 触发自定义事件
   }
  }
},

二、父子组件数据双向绑定

Vue 的数据都是单向流动的,而且 vue 中从来就没有任何的双向绑定,v-model 实现的双向绑定只是语法糖而已。

方式1:利用 watch 实现父子组件的数据双向绑定,具体实例如下:

<div id="app">
 数据<br>{{num}}
 <input type="text" v-model="num"><br>
 <cld :numb="num" @accept="getNumC"></cld>
</div>
//子组件内容
<template id="child">
 <div>
  数据<br>{{childNum}}
  <input type="text" v-model="childNum" />
 </div>
</template> 

  <!-- 父子组件通信 -->
const app = new Vue({
 el:'#app',
  data:{
   num:'520',
   },
  methods:{
   getNumC(data){
    this.num = data
   }
  },
  components:{
   cld:{
    template:'#child',
    props:{
     numb:String
    },
   data(){
    return{
     childNum:0,
    }
   },
  watch:{
   numb:function(){
    this.childNum = this.numb
   },
   childNum:function(){
    this.$emit('accept',this.childNum)
    }
   },
  mounted(){
   this.childNum = this.numb
   }
  }
 }
})

方式2:.sync 修饰符实现双向绑定

在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的 prop 的值时,这个变化也会同步到父组件中所绑定的值。这很方便,但也会导致问题,因为它破坏了单向数据流。(数据自上而下流,事件自下而上走)

<cld :numb.sync="num" ></cld>
//会扩展为:
<cld  :numb="bar"  @update:numb=”val => bar = val”/>

当组件需要更新 numb 的值时,需要触发更新事件:

this.$emit("update:numb", newValue );

使用具体实例如下:

// 父组件
<Father :foo.sync="foo"></Father> 

//子组件
props: ['foo'],
data() {
  return {
   newFoo: this.foo;
   }
},
methods:{
 add:function(){
  this.newMsg=10;
  this.$emit('update:foo',this.newFoo);
 }
}

到此这篇关于前端框架Vue 父子组件数据双向绑定的文章就介绍到这了,更多相关Vue 父子组件数据双向绑定内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-12

vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案

场景 今天在使用 v-model 进行组件双向数据绑定的时候遇到了一个奇怪的问题,网页本身运行正常,浏览器一直出现警告信息. [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

Vue使用.sync 实现父子组件的双向绑定数据问题

1.前言 最近在vue 项目中有一个需求, 就是我需要根据不同的类型在页面中放不同的组件, 组件需要跟当前页面的数据进行双向绑定,如果都写在同一个页面 代码会显得比较多,毕竟我当前页面已经7-800行代码了 所以我需要把一些元素定义成组件 ,封装起来,所以就会遇到 数据的传值绑定问题 2.父组件 首先我们来看看官方文档 [ https://cn.vuejs.org/v2/guide/components.html#sync-修饰符 ] .sync 修饰符所提供的功能.当一个子组件改变了一个 pr

Vue父子组件双向绑定传值的实现方法

父子组件之间的双向绑定非常简单,但是很多人因为是从Vue 2+开始使用的,可能不知道如何双向绑定,当然最简单的双向绑定(单文件中)就是表单元素的 v-model 了,例如 <input type="text" /> 它会响应表单元素的 value 属性,当输入框文本改变时,会将 value 值传给 v-model 所绑定的变量,如果同时设置 v-model 和 value , value 属性无效. 父子组件的自定义双向 v-model 当若干dom封装成组件时,在父组件中

vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法

上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下.接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定. 父子组件同步通信的多种写法,具体详情如下所示: 父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-mo

解决Vue2.x父组件与子组件之间的双向绑定问题

最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex,但观摩了一下其他优秀的UI框架,发现使用Vuex会给其他使用者造成麻烦,于是决心找到寻求解决方法,在参考了几篇大牛们文章后,终于找到. 在这将解决方案贴出,希望能帮助到和我一样初次接触Vue这个框架的同行们. 子组件的代码逻辑 <template> <div class="ne-i

Vue2.0实现组件数据的双向绑定问题

通过上一节的学习,我们了解到了在Vue的组件中数据传递: prop 向下传递,事件向上传递 .意思是父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息.但Vue中, props 是单向数据绑定,虽然在Vue 1.0版本中,通过 .sync 能实现双向数据绑定.但 .sync 在几个版本中被移除,尽管在2.3版本重新引入 .sync 修饰符,可这次引入只是作为一个编译时的语法糖存在.如果直接使用 .sync 修饰符来做双向数据绑定,会报警告信息.那么我们如何在组件中实现双向数据

VUE实现表单元素双向绑定(总结)

本文介绍了VUE实现表单元素双向绑定(总结) ,分享给大家,具体如下: checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <input type="checkbox" v-model="inputdata"/> <input type="checkbox" v-model="inpu

VUE v-model表单数据双向绑定完整示例

本文实例讲述了VUE v-model表单数据双向绑定.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue v-model双向绑定</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></s

解决Vue.js 2.0 有时双向绑定img src属性失败的问题

错误用法: <img src="http:0.0.0.127/{{item.imgname}}" alt=""> 正确用法: <img src="'http:0.0.0.127/'+item.imgname" alt=""> 绑定属性的时候,前面加: 属性的值可以用表达式,但注意字符串拼接的时候要加引号 以上这篇解决Vue.js 2.0 有时双向绑定img src属性失败的问题就是小编分享给大家的全部内

Vue表单demo v-model双向绑定问题

具体代码如下所示: <div id="app"> <textarea v-model = "message" placeholer = '请在此输入文字'></textarea> <span>{{message}}</span> </br> <input type="text" v-model="data.name"/> <span>

详解Vue源码学习之双向绑定

原理 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器. 上面那段话是Vue官方文档中截取的,可以看到是使用Object.defineProperty实现对数据改变的监听.Vue主要使用了观

Vue父子组件传值的一些坑

在用 Vue 的父子组件传值时遇到一个冷门的问题,子组件改变值后父组件的值也随之改变了,特此记录下原因和解决方式. 再系统梳理下 JavaScript 的深拷贝与浅拷贝相关知识点. 1. 问题描述 父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变. 这个问题比较冷门,平时如果对组件通信使用得比较简单,一般不会遇到. 2. 原因剖析 核心:双向绑定 父子组件传值的时候涉及双向绑定,当传值为 object 类型时,传值之后数据源会被改变. 深拷贝与浅拷贝 下文详细讲. 3. 解决方