• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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; // 非必传
    
        @Ref() private readonly son!: Son
    
        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 Son).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 Son).handleChangeDesc('你好,中国')
      }
      
    • <数据类型> ===>> 比如

      handleSonMethod() {
           // 调用子组件的handleChangeDesc方法
           (<Son>this.$refs.son).handleChangeDesc('你好,中国')
      }
      
  • 第二种方式:Ref

    // 1. 在定义Ref时指定数据类型为Son
    @Ref() private readonly son!: Son
    
    // 2. 使用的时候就可以直接this.son
     this.son.handleChangeDesc('你好,中国')
    
  • 效果图

    • 触发前

    • 触发后


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
使用VSCode搭建TypeScript开发环境发布时间:2022-07-18
下一篇:
Grid.js是使用TypeScript编写的免费和开放源代码HTML表格插件发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap