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

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

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

1，父组件给子组件传值

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

3，子组件给父组件传值

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

 

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

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

 <child-page :toChildData='message'></child-page>

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

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

<el-button @click="fatherToChild">调用子方法</el-button>
<child-page :toChildData='message' ref="myChild"></child-page>

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

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

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

 <child-page  @fatherMethods='fatherMethods'></child-page>
 methods: {
    fatherMethods () {
      this.myFather = '我是一个被子组件调用的方法'
    }
  }

<el-button @click="childMethod">调用父方法</el-button>
 methods: {
    childMethod () {
      this.$emit('fatherMethods');
    }
  }

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

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

 <child-page  @fatherMethods='fatherMethods'></child-page>
 methods: {
    fatherMethods (data) {
      this.myFather = data
    }
  }

<el-button @click="childMethod">调用父方法</el-button>
 methods: {
    childMethod () {
      this.$emit('fatherMethods','给父亲的文字');
    }
  }

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

父亲完整代码

<template>
  <div class="father">
    <h1>我是父亲</h1>
    <div>{{myFather}}</div>
    <el-button @click="fatherToChild">调用子方法</el-button>
    <child-page :toChildData='message'
                @fatherMethods='fatherMethods'
                ref="myChild"></child-page>
  </div>
</template>

<script>
import ChildPage from '../views/childPage.vue'
export default {
  name: 'father',
  components: {
    ChildPage
  },
  data () {
    return {
      myFather: '暂无内容',
      message: '你好儿子，我是父亲传递过来的文字'
    }
  },
  methods: {
    fatherMethods () {
      this.myFather = '我是一个被子组件调用的方法'
    },
    fatherToChild () {
      this.$refs.myChild.showMethod('我调用你（子组件）')
    }
  }

}
</script>

<style>
</style>

子组件代码

<template>
  <div class="child">
    <h1>展示父亲传递过来的内容</h1>
    <div>{{toChildData}}</div>
    <div>父组件调用子组件方法--{{clickText}}</div>
    <el-button @click="childMethod">调用父方法</el-button>
  </div>
</template>

<script>
export default {
  name: 'child',
  props: {
    toChildData: {
      type: String
    }
  },
  data () {
    return {
      mytext: '我是儿子',
      clickText: ''
    }
  },
  methods: {
    childMethod () {
      this.$emit('fatherMethods');
    },
    showMethod (e) {
      this.clickText = e
    }
  }
}
</script>

<style>
</style>

 

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

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

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

<template>
  <div class="hello">
    <el-input v-model="msg"></el-input>
    <h1>我是父组件</h1>
    <div>{{faterData}}</div>
    <child-page :toChildMsg='msg'></child-page>
  </div>
</template>
<script lang="ts">
import ChildPage from '../views/childCom.vue'
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  components: {
    ChildPage
  }
})
export default class HelloWorld extends Vue {
  private msg: string = '测试'
}
</script>

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

<template>
  <div class="child">
    <h1>我是子组件</h1>
    {{toChildMsg}}
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class Child extends Vue {
  @Prop({
    type: String,
    required: false
  })
  toChildMsg!: string
}
</script>

@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('父掉子方法')

<template>
  <div class="hello">
    <el-button @click="fatherToChild">调用子方法</el-button>
    <child-page ref='myChild'></child-page>
  </div>
</template>

<script lang="ts">
import ChildPage from '../views/childCom.vue'
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  components: {
    ChildPage
  }
})
export default class HelloWorld extends Vue {
  private myChild: any = null

  fatherToChild(): void {
    (this.$refs.myChild as any).showMethod('父掉子方法')
  }
}
</script>

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

<template>
  <div class="child">
    <div>父组件调用子方法+{{fc}}</div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'

@Component
export default class Child extends Vue {
  private fc: string = ''

  private showMethod(e: any): void {
    this.fc = e
  }
}
</script>

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

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

在子组件中就的用childMethod

<template>
  <div class="hello">
    <el-input v-model="msg"></el-input>
    <h1>我是父组件</h1>
    <div>{{faterData}}</div>
    <child-page :toChildMsg='msg'
                @child-method='fatherMethods'></child-page>
  </div>
</template>

<script lang="ts">
import ChildPage from '../views/childCom.vue'
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  components: {
    ChildPage
  }
})
export default class HelloWorld extends Vue {
  private msg: string = '测试'
  private faterData: string = ''

  private fatherMethods(val: string) {
    this.faterData = val
  }
}
</script>

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

<template>
  <div class="child">
    <h1>我是子组件</h1>
    {{toChildMsg}}
    <el-button @click="childMethod">调用父方法</el-button>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'

@Component
export default class Child extends Vue {
  @Prop({
    type: String,
    required: false
  })
  toChildMsg!: string

  private msg: string = '你好，我是子子组件调用父组件方法'

  @Emit()
  private childMethod() {
    return this.msg
  }
}
</script>

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

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

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

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

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

先入门  在  深入