title
aboutme
github
blog
組件通信是很重要的一部分,父組件怎么傳數(shù)據(jù)給子組件,子組件怎么傳遞數(shù)據(jù)給父組件?
1,父組件給子組件傳遞數(shù)據(jù)
vue中使用props向子組件傳遞數(shù)據(jù)
1): 子組件在props中創(chuàng)建一個(gè)屬性,用于接收父組件傳過來的值
2): 父組件中注冊(cè)子組件
3): 在子組件標(biāo)簽中添加子組件props中創(chuàng)建的屬性
4): 把需要傳給子組件的值賦給該屬性
2,子組件向父組件傳遞數(shù)據(jù)
子組件主要通過事件傳遞數(shù)據(jù)給父組件
1), 子組件中需要以某種方式,例如點(diǎn)擊事件的方法來觸發(fā)一個(gè)自定義事件
2),將需要傳的值作為$emit的第二個(gè)參數(shù),該值將作為實(shí)參數(shù)傳給相應(yīng)自定義事件的方法
3),在父組件中注冊(cè)子組件并在子組件標(biāo)簽上綁定自定義事件的監(jiān)聽
3,子組件向子組件傳遞數(shù)據(jù)
vue找那個(gè)沒有直接子組件對(duì)子組件傳參的方法,建議將需要傳遞數(shù)據(jù)的在組件,都合并為一個(gè)組件,如果一定需要子組件對(duì)子組件傳參,可以先傳到父組件,再傳到子組件,為了方便開發(fā),vue推出了一個(gè)狀態(tài)管理工具vuex,可以啃方便的實(shí)現(xiàn)組件之間的參數(shù)傳遞
具體的實(shí)例代碼如下:可以自行參考相關(guān)代碼在編輯器中嘗試
- 父組件向子組件傳遞數(shù)據(jù)
// 父組件向子組件傳遞數(shù)據(jù)
<!--
msg 是在data中(父組件)定義的變量
如果需要從父組件中獲取logo的值,就需要使用props['msg'], 如30行
在props中添加了元素以后,就不需要在data中(子組件)中再添加變量了
-->
<template>
<div>
<child @transferuser="getUser" :msg="msg"></child>
<p>用戶名為:{{user}}(我是子組件傳遞給父組件的數(shù)據(jù))</p>
</div>
</template>
<script>
import child from './child.vue';
export default {
components: {
child,
},
data() {
return {
user: '',
msg: '我是父組件傳給子組件的信息',
};
},
methods: {
getUser(msg) {
this.user = msg;
console.log(msg);
},
},
};
</script>
- 子組件向父組件傳遞數(shù)據(jù)
// 子組件向父組件傳遞數(shù)據(jù)
<!--
1.@ : 是 v-on的簡(jiǎn)寫
2.子組件主要通過事件傳遞數(shù)據(jù)給父組件
3.當(dāng)input的值發(fā)生變化時(shí),將username傳遞給parent.vue,首先聲明了一個(gè)setUser,用change事件來調(diào)用setUser
4.在setUser中,使用了$emit來遍歷transferUser事件,并返回this.username,其中transferuser是一個(gè)自定義事件,功能類似一個(gè)中轉(zhuǎn),this.username通過這個(gè)事件傳遞給父組件
-->
<template>
<div>
<div>{{msg}}</div>
<span>用戶名</span>
<input v-model="username" @change='setUser'>向父組件傳值</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '測(cè)試',
};
},
props: {
msg: {
type: String,
},
},
methods: {
setUser() {
this.$emit('transferuser', this.username);
},
},
};
</script>
