這是一個系列文章 之前的系列文章地址：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事件名，
基本以上這些就可以實現 父子傳值和調用了
先入門 在 深入