前端框架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 父子组件数据双向绑定内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！