vue ts使用Prop向子组件传值

水深无声 2022-10-23 11:22 398阅读 0赞

## vue2.0 ts使用Prop向子组件传值 ##

在父组件中想要给子组件传值，可以在子组件使用 :parentName(子组件通过@Prop获取该值的变量名)=‘parentName’（想要传的值），这样，在子组件里可以通过 @Prop(\{ default: “default value” \}) parentName!: string;获取父组件传过来的值了。  
**父组件**

<template>
      <div>
        <div class="parent">
          <h1>父组件名字:{ { parentName}}</h1>
        </div>
        <Child
        :parentName='parentName'
        />
    
      </div>
    </template>
    
    <script lang="ts">
    import {  Component, Vue } from 'vue-property-decorator';
    import Child from '@/components/Child.vue';
    
    @Component({ 
      components: { 
        Child
      },
    })
    export default class Home extends Vue { 
      parentName:string='父组件'
    }
    </script>

**子组件**

<template>
      <div>
        <div class="child">
            <h1>子组件</h1>
            <h2>父组件传过来的的值:{ {  parentName }}</h2>
          </div>
      </div>
    </template>
    
    <script lang="ts">
    import {  Component, Vue, Prop,Emit } from "vue-property-decorator";
    
    @Component({ 
      components: { },
    })
    export default class Child extends Vue { 
      @Prop({  default: "default value" }) parentName!: string;
      //@Prop()可以为空，也可以通过@Prop({ default: "default value" })给parentName设置默认值
    }
    </script>

**实现效果图**s  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]: /images/20221023/b9c8675f9a0f40a8ae2c08de249ac056.png