Vue父子傳遞例項講解
阿新 • • 發佈：2020-02-16
實現功能：
1、子元件的input輸入，改變父元件資訊
2、父元件對子元件1，3進行監聽與控制
3、子元件1與子元件3相互關聯
父子雙向通訊流程：
子元件的input通過事件監聽->控制子元件的data中變數/向父元件$emit子事件及變數
父元件監聽到$emit事件及變數，賦予父元件的變數，通過props傳到子元件
<body>
<div id = "app">
<!-- //將父元件num1的資料傳給props中的pnumber1,實現父傳子
//監聽子元件num1change事件，這裡recdnum1函式，沒明白加括號出錯 -->
<cnp
:pnumber1 = "num1"
:pnumber3 = "num3"
@num1change = "recdnum1"
@num3change="recdnum3" >
</cnp>
</div>
<!-- //template 編寫自己的模版 -->
<template id = "mytemp">
<div>
<h3>props:{{pnumber1}}</h3>
<h3>child-data:{{dnumber1}}</h3>
<h3></h3>
<input type="text" :value="dnumber1" @input="num1input">
<h3>props:{{pnumber3}}</h3>
<h3>child-data:{{dnumber3}}</h3>
<input type="text" :value="dnumber3" @input="num3input">
</div>
</template>
<script>
var app = new Vue({
el:"#app",data(){
return{
//父元件資料庫中的預設數值
num1:11,num3:31,}
},methods:{
//監聽事件中，將子元件傳來的dnumber1傳給num1，num1傳給pnumber1
recdnum1(value){
//預設傳遞來的value為String，根據需要轉為Int或Float
this.num1 = parseInt(value);
},recdnum3(value){
this.num3=parseFloat(value);
}
},components: {
cnp:{
template:"#mytemp",props: {
pnumber1:{
//預設props的資料格式和預設值
type:Number,default:1
},pnumber3:{
type:Number,default:3
}
},data(){
return{
//將props的數值賦予data中變數
dnumber1:this.pnumber1,dnumber3:this.pnumber3
}
},methods: {
num1input(event){
//將input中的數值傳給dnumber1
this.dnumber1 = event.target.value;
//向父元件發射事件num1change,並傳出dnumber1資料
this.$emit("num1change",this.dnumber1);
//繫結pnumber3數值的關聯性
this.dnumber3=this.dnumber1*5;
//向父元件發射pnumber3資訊
this.$emit("num3change",this.dnumber3);
},num3input(event){
this.dnumber3 = event.target.value;
this.$emit("num3change",this.dnumber3)
},}
}
}
});
</script>
</body>以上就是相關的例項程式碼，希望我們整理的內容能夠幫助到大家。