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

---

前言

父组件向子组件传值：使用 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 //添加必须值，不传此值会报错 
 }