vue-cli3.0以上 + typeScript 教程学习指导（四） 父子传值

这是一个系列文章 之前的系列文章地址：https://blog.csdn.net/www_share8/category_9877844.html

本次文章 将从下面四个方面来讲述

1，父组件给子组件传值

2，父组件调用子组件方法

3，子组件给父组件传值

4，子组件调用父组件方法

 

依然采用 对比vue的方法来讲述 学习，先来看一下vue 中是如何实现上面的四种方法的

1，vue父组件传值给子组件，在父组件中 对引入的 子组件 v-bind 绑定内容，在子组件文件中 用props声明一下 就可以直接在子文件中使用了。

 props: {
    toChildData: {
      type: String
    }
  },

2，vue父组件要调用子组件 方法 ，可以通过在子组件中 ref='子组件标记'，在方法中调用 this.$refs.标记.子组件方法

调用子方法


methods: {
    fatherToChild () {
      this.$refs.myChild.showMethod('我调用你（子组件）')
    }
  }

 methods: {
    showMethod (e) {
      this.clickText = e
    }
  }

3，vue子组件给父组件传值 和 4调用父方法可以只用下面的这样方法就可以实现

 
 methods: {
    fatherMethods () {
      this.myFather = '我是一个被子组件调用的方法'
    }
  }

调用父方法
 methods: {
    childMethod () {
      this.$emit('fatherMethods');
    }
  }

在父组件中 通过@标记=‘父方法’，在子组件中通过 this.$emit('标记')，就可以实现 调用父方法

为什么我会说  传值和调用方法可以用上面的同一个呢？

 
 methods: {
    fatherMethods (data) {
      this.myFather = data
    }
  }

调用父方法
 methods: {
    childMethod () {
      this.$emit('fatherMethods','给父亲的文字');
    }
  }

是不是 只改用了一下方法就可以实现 代用方法和传值了。

父亲完整代码

子组件代码

 

vue中父子组件相互传值和调用方法的  细节我们已经 了解完了，现在 在看看 typeScript 中是如何处理 上面的4给内容的

1，ts中父组件给子组件传值，

首先引入和绑定和vue都是相同的  注意这里的 组件注册 使用了@Component装饰器

 子组件，首先 需要引入 @Prop 装饰器

@Prop装饰器

@Prop({ // 传入数组和对象 后面再补充 先入最基本的门

        type: String,  //type: [String, Number]

        default: 'Default Value', //默认值

        require: true// 是否是必须输入

    })

2，ts中父组件调用子组件方法

首先 和vue一样 使用ref,注意这里的声明了 ref='标记'的内容 private myChild: any = null，调用也变成了

(this.$refs.myChild as any).showMethod('父掉子方法')

子组件中，和vue差不多 定义一个方法 让父组件调用

3 ts 子组件给父组件传值 和 4调用父方法,和vue有相同之处

父组件，和vue一样使用 @（标记 驼峰变-）子组件中 以这个标记为click事件，如此次表示是 child-method 

在子组件中就的用childMethod

子组件，注意这个@click =标记名字，需要引入@Emit()装饰器 在将需要传递的内容传递给父组件

子组件调用 父组件方法 也可以直接 这样调用  你可以直接传值给父组件  父组件在做一些 操作 （这是目标小白我的理解 后期会深入）

总结一下，ts中父组件传值给子组件基本上，调用@Prop装饰器就可以使用了，但数组和对象没有尝试，后面会补上。

父组件调用子方法 是百度的 参考https://www.cnblogs.com/guojbing/p/11227350.html文字得到的

子组件传值和父组件和子组件调用父组件方法  和vue差不多，不同点 在父组件中标记 必须作为 子组件的click事件名，

基本以上这些就可以实现  父子传值和调用了

先入门  在  深入