关于props实现双向绑定

首先我们学过props知道，这是父组件传给子组件的一个属性，只能单向的父组件传给子组件，而不能够子组件改变父组件的值。下面我们将会实现props双向绑定的功能。

父组件

pare.vue

<template>  
  <div class>    
     <child :a="msg" @get="post"></child>  
   </div>
   </template>
   <script>
    import child from "./child.vue";
     export default { 
      name: "pare", 
      components: {    child  }, 
      data() {    return {      msg: "maomin"    };  },  
      computed: {},   
      watch: {},  
      methods: {      
         post(data){ 
           this.msg=data;  
           console.log(this.msg)//happy,birthday!      
       }  },
       };
      </script>
     <style scoped></style>

子组件

child.vue

<template> 
 <div class>   
 <p>{{a}}</p>  
 </div>
</template>
<script>
export default {  
name: "child",  
components: {},  
props: ["a"],  
data() {    return {        msg:"happy,birthday!"    };  },  
computed: {},  watch: {      a(){          this.msg=this.a      }  },  
methods: {  },  //生命周期 - 挂载完成（可以访问DOM元素）  
mounted() {       this.$emit('get',this.msg)  },};
</script>
<style  scoped></style>