Vue中父子组件的双向数据绑定

Posted 2022-11-07 MikrokosmosRun

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、父子组件单向传值
• • 1.父组件向子组件传值
  • 2.子组件向父组件传值
• 二、父子组件数据双向绑定
• • 1.v2.2.0+ 新增model通过model属性实现
  • 2.sync修饰符（v2.3.0+ 新增）

---

前言

父组件向子组件传值：使用 props 属性

子组件向父组件传值：使用自定义事件。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、父子组件单向传值

1.父组件向子组件传值

父组件：

<template>
  <child :nameP="name"></child> 
</template>

<script>
  export default 
    components: 
      child
    ,
    data () 
      return 
        name: '父组件'
      
    
  
</script>

子组件：

<template id="child"> 
 <div> 
   nameP  
 </div> 
</template>

<script>
  export default 
    // 接受父组件的值
    props: 
     nameP:String 
    
  
</script>

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.子组件向父组件传值

子组件：

<template>
  <div>
    子组件:
    <span>childValue</span>
    <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="childClick">
  </div>
</template>

<script>
  export default 
    data () 
      return 
        childValue: '我是子组件的数据'
      
    ,
    methods: 
      childClick () 
        // childByValue是在父组件on监听的方法
        // 第二个参数this.childValue是需要传的值
        this.$emit('childByValue', this.childValue)
      
    
  
</script>

父组件：

<template>
  <div>
    父组件:
    <span>name</span>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <child v-on:childByValue="childByValue"></child>
  </div>
</template>

<script>
  import child from './child'
  export default 
    components: 
      child
    ,
    data () 
      return 
        name: ''
      
    ,
    methods: 
      childByValue: function (childValue) 
        // childValue就是子组件传过来的值
        this.name = childValue
      
    
  
</script>

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

1.v2.2.0+ 新增model通过model属性实现

父组件

<template>
    <div>
        <child v-model='value'></child>
        // 等价于
        <child :value='value' @childValueChange = "val=> value = val "></child>
         父子组件同步的数据：<span>value</span>
    <div/>
</template>

<script>
data() 
      return 
        value: '父组件的数据'
      
    
</script>

子组件

//子组件child
<template>
    <input type="text" v-model="childValue" @input="childInputChange"/>
</template>

<script>
    export default 
        name: "child",
        model:   // 定义model
        	// 父组件v-model绑定的值传递给props中的fatherValue
            prop: 'fatherValue',  
            // 通过emit触发childValueChange将内部值传递给父组件v-model绑定的值
            event: 'childValueChange'  
        ,
        props: 
            fatherValue: String    // 接受父组件传递的值
        ,
        data()
            return 
                childValue: this.fatherValue// 关联值
            
        ,
        methods: 
            childInputChange() 
                // 通过$emit触发childValueChange（model内定义）事件，将内部值传递给给父组件
                this.$emit('childValueChange', this.childValue)
            
        
    
</script>

2.sync修饰符（v2.3.0+ 新增）

父组件

<template>
    <div>
        我是父子组件之间同步的数据data
        <child :data.sync='data'></child>
    </div>
</template>

<script>
    data()
      return 
        data:'我是来自父组件的数据'
      
    
</script>

子组件

<template>
  <div>
    <input type="text" v-model="childData" @input="childDataChange">
  </div>
</template>

<script>
    props:
      data:
        default:'',
        type:String
      
    ,
    data()
      return 
        childData:this.data //关联父组件的值
      
    ,
    watch:
      data()
        this.childData = this.data
      
    ,
    methods:
      childDataChange()
        this.$emit('update:data', this.childData) // 触发update:data将子组件值传递给父组件
      
    
</script>

其实就是

  <child :data='data' v-on:update:data="data = $event"></child>
  被简化成了
  <child :data.sync='data'></child>

而其他代码不变。所以我们在使用.sync修饰符的时候，只需要注意v-bind:xx，v-on:update:xx，v-bind:xx.sync的差异就行了，但是注册事件的时候一定要用this.$emit( ‘update:xx’ )。