vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式

vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式

class类组件示例

  • Father类组件

    <template>
        <div>
            <h1>父组件</h1>
            <button @click="handleSonMethod">点击触发子组件方法(修改子组件的描述)</button>
            <Son ref="son" />
        </div>
    </template>
    
    <script lang='ts'>  // lang要定义为ts
    import { Vue, Prop, Component } from "vue-property-decorator";
    import Son from "./Son.vue";
    
    @Component({
        name: "Father",
        components: { Son }
    })
    export default class Father extends Vue {
        // prop
        @Prop(Array) sub_projects!: string[]; // 必传
        @Prop(String) selected_project?: string; // 非必传
    
        // data
        son: any = null // 存储子组件
        selected_org: string = "1";
        options: Array<{ value: string; label: string }> = [
            {
                value: "1",
                label: "1"
            },
            {
                value: "2",
                label: "2"
            },
            {
                value: "3",
                label: "3"
            }
        ];
    
        // computed 计算属性
        get username(): string {
            return `计算属性username`;
        }
    
        // 钩子函数
        created() {
            console.log("created钩子触发了");
        }
    
        // method 方法
        handleSonMethod() {
            // 调用子组件的handleChangeDesc方法
            (this.$refs.son as any).handleChangeDesc('你好,中国')
        }
    }
    </script>
  • Son类组件

    <template>
        <div>
            <h2>子组件的描述信息:<span style='color: red'>{{ desc }}</span></h2>
        </div>
    </template>
    
    <script lang='ts'>
    import { Vue, Component } from "vue-property-decorator";
    
    @Component({ name: "Son" })
    export default class Son extends Vue {
    
        // data
        desc: string = "我是子组件Son";
    
        /**
         * @description: 修改子组件展示的描述信息
         * @param { string } msg 子组件描述信息 
         */
        handleChangeDesc(msg: string) {
            this.desc = msg;
        }
    }
    </script>

父组件触发子组件方法的方式

  • 以前的方式 this.$refs.son.handleChangeDesc('你好,中国')

    • 会报错,因为引入了typescript

  • 第一种方式:类型断言

    • as 关键字(推荐用这种)

      handleSonMethod() {
          // 调用子组件的handleChangeDesc方法
          (this.$refs.son as any).handleChangeDesc('你好,中国')
      }
    • <数据类型> ===>> 比如

      handleSonMethod() {
           // 调用子组件的handleChangeDesc方法
           (<any>this.$refs.son).handleChangeDesc('你好,中国')
      }
  • 第二种方式:将this.$refs.son赋值给一个组件的一个属性

    // 1. 组件上定义一个可以存储任意数据类型值的属性‘son’
    son: any = null // 存储子组件
    
    // 2. 将子组件的实例赋值给‘son’,通过这个变量去调用子组件的方法
     handleSonMethod() {
            // 调用子组件的handleChangeDesc方法
            this.son = this.$refs.son
            this.son.handleChangeDesc('你好,中国')
     }
  • 效果图

    • 触发前

    • 触发后

posted @ 2019-07-22 17:47  _冰  阅读(...)  评论(... 编辑 收藏