Vue+ts 父子组件传参方式介绍

项目里使用Vue3.0+ts，记录一下项目里父子组件传参方式

1. 父传子
   父布局代码：

   <template>
       <div class="images">
           <CommonLeftbar @left-click = "leftClick"  :parentToChildren="msg" />
       </div>
   </template>
   <script lang="ts">
   import { Component, Vue } from "vue-property-decorator";
   import CommonLeftbar from '@/components/common/CommonLeftbar.vue'
   @Component({
     components:{
       CommonLeftbar
     }
   })
   export default class Images extends Vue{
     private msg = "父布局向子布局传参"
   }
   </script>
   
   

   子布局代码：

   <template>
     <div class='leftbar'>
       <span> {{parentToChildren}}</span>
     </div>
   </template>
   <script lang="ts">
   import { Component, Vue,Emit, Prop } from 'vue-property-decorator'
   export default class CommonLeftbar extends Vue{
       @Prop()
       private parentToChildren: unknown;
   }
   </script>
   

   一定要注意，子布局里接受参数不要赋值，不然会报错覆盖该属性问题
2. 子传父
   子布局代码：

   <template>
       <div class='leftbar'>
           <button @click="dwvChange(leftbarVal)"></button>
       </div>
   </template>
   <script lang="ts">
       import { Component, Vue,Emit, Prop } from 'vue-property-decorator'
       export default class CommonLeftbar extends Vue{
           private leftbarVal = '111'
       @Emit() 
       leftClick(val: string){
           return val
        }
       // 按钮点击事件，点击事件里需要调用Emit的方法
       dwvChange(info: string): void{
           this.leftClick(info)
       }
   </script>
   

   父布局代码

   <template>
       <div class="images">
           <CommonLeftbar @leftClick = "leftClick"/>
           <span>{{childrenToParent}}</span>
       </div>
   </template>
   <script lang="ts">
       export default class Images extends Vue{
         private childrenToParent = ''
         leftClick(a: string){
           this.childrenToParent = a
           console.log(a)
         }
       }
   </script>