隨著 typescript 越來越受到前端框架的關(guān)注来庭，最近使用 vue + typescript 做了一個(gè)項(xiàng)目妒蔚。發(fā)現(xiàn)寫法與 vue + js 完全不一樣。但是原理相同月弛。接下來給大家介紹 Vue 開發(fā)中常用的傳值方式肴盏。
Vue 常用的三種傳值方式有：
父?jìng)髯?br>
子傳父
非父子傳值
引用官網(wǎng)的一句話：父子組件的關(guān)系可以總結(jié)為 prop 向下傳遞，事件向上傳遞帽衙。父組件通過 prop 給子組件下發(fā)數(shù)據(jù)菜皂，子組件通過事件給父組件發(fā)送消息
接下來我們來看下實(shí)例
1. 父組件向子組件進(jìn)行傳值
父組件
// 父組件
<template>
<div class="index">
<div>父組件: <input type="text" v-model="value"></div>
<!-- 引入子組件 -->
<About :value="value"/>
</div>
</template>
<script lang="tsx" type="text/tsx">
import {Component, Prop, Vue} from "vue-property-decorator";
import About from "@/views/About.vue";
@Component({ // 引入子組件
components: {
About
}
})
export default class HelloWorld extends Vue {
value: string = "我是父組件哦";
created() {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
子組件
// 子組件
<template>
<div class="about">
子組件：<span>{{value}}</span>
</div>
</template>
<script lang="tsx" type="text/tsx">
import {Component, Prop, Vue} from "vue-property-decorator";
@Component
export default class About extends Vue {
// 接受父組件的值
@Prop({
type: String, // 父組件傳遞給子組件的數(shù)據(jù)類型
required: false, // 是否必填
default: ' ' // 默認(rèn)值， 如果傳入的是 Object厉萝，則要 default: ()=>({}) 參數(shù)為函數(shù)
}) value !: string;
created() {}
}
</script>
2. 子組件向父組件傳值
父組件
. // 父組件
<template>
<div class="index">
<div>父組件：{{msg}}</div>
<!--bindSend 為子組件 @Emit('bingSend') 里面綁定的事件-->
<About @bindSend="propMsg"/>
</div>
</template>
<script lang="tsx" type="text/tsx">
import {Component, Vue} from "vue-property-decorator";
import About from "@/views/About.vue";
@Component({
components: {
About
}
})
export default class HelloWorld extends Vue {
msg: string = '';
created() {};
// 接收子組件發(fā)送數(shù)據(jù)是 觸發(fā)的事件
propMsg(msg: string){
this.msg = msg;
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
子組件
// 子組件
<template>
<div class="about">
子組件：我的子組件的數(shù)據(jù) <button @click="propMsg">點(diǎn)擊給父組件發(fā)送數(shù)據(jù)</button>
</div>
</template>
<script lang="tsx" type="text/tsx">
import {Component, Emit, Vue} from "vue-property-decorator";
@Component
export default class About extends Vue {
msg: string = '子組件的msg數(shù)據(jù)';
// bindSend 為父組件引用子組件上 綁定的事件名稱
@Emit('bindSend') send(msg: string){}; // send 處理給父組件傳值的邏輯
created() {}
// 通過觸發(fā)這個(gè)事件來處理發(fā)送的內(nèi)容數(shù)據(jù)的邏輯恍飘，然后執(zhí)行 @Emit() 定義的 sen(msg: string){} 事件
propMsg(){
this.msg = '子組件的msg數(shù)據(jù),被傳給了父組件';
this.send(this.msg)
}
}
</script>
- 兄弟組件向傳值
這里我們實(shí)現(xiàn)的思路是： （1）其中一個(gè)兄弟組件向父組件發(fā)送數(shù)據(jù)； （2）然后父組件再向另一個(gè)兄弟組件傳值谴垫；
原作者：https://blog.csdn.net/weixin_34336292/article/details/91368525
