2021-05-12 14:32:11
vue父子元件的互相傳值和呼叫
2021-04-22 16:00:58
1、父傳值給子元件
父元件：
<template>
<div>
<p class="father">父元件</p>
<child :sid="id"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data() {
return {
id:'1234' // 父元件向子元件傳的值
}
}
}
</script>
子元件：
<template>
<div>
<p class="child">子元件</p>
<p class="child">接收父元件的值是：{{ sid }}</p>
</div>
</template>
<script>
export default {
props:{
sid:{
type:String,
default: '0'
}
},
// props:["sid"],
data() {
return {
}
}
}
</script>
說明：
①sid是在子元件中繫結要傳的值，記住「=」前的sid要和子元件中要接受的變數名要一致
②在子元件中用props來接受傳入的值，可以寫成物件型別，規定型別和預設值，也可以直接寫成字串
③在子元件中可以直接使用，也可以在函數中使用this.sid進行存取
2、子傳值給父元件
父元件：
<template>
<div>
<p class="father">父元件</p>
<p class="father">接收到子元件的值：{{childSid}}</p>
<child @passVaule="parentPassValue"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data() {
return {
childSid:'' // 接收子元件的值
}
},
methods: {
parentPassValue(data) {
this.childSid = data;
}
}
}
</script>
子元件：
<template>
<div>
<p class="child">子元件</p>
<button @click="valueClick">傳值</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
valueClick() {
this.$emit('passVaule',19)
}
}
}
</script>
說明：
①子元件中給一個方法去觸發$emit，第一個引數是在父元件引入子元件繫結的函數名('passVaule')，第二個是要傳的值(19)
②父元件中繫結一個函數，呼叫父元件中繫結的函數，在其中對值進行接收操作
3、子呼叫父元件中的方法
父元件：
<template>
<div>
<p class="father">父元件</p>
<child @funVaule="parentFunValue"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data() {
return {
}
},
methods: {
parentFunValue() {
console.log('呼叫了父元件中的函數');
}
}
}
</script>
子元件：
<template>
<div>
<p class="child">子元件</p>
<button @click="funClick">呼叫父元件方法</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
funClick() {
this.$emit('funVaule')
}
}
}
</script>
說明：
①這個和子傳值給父類別似，只是不傳值，呼叫了父元件的繫結的函數
4、父呼叫子元件中的方法
父元件：
<template>
<div>
<p class="father">父元件</p>
<button @click="childClick">呼叫子元件方法</button>
<child ref="mychild"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data() {
return {
}
},
methods: {
childClick() {
this.$refs.mychild.testNum(1)
}
}
}
</script>
子元件：
<template>
<div>
<p class="child">子元件</p>
</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
testNum(data) {
console.log('呼叫了子元件中的方法:', data);
}
}
}
</script>
說明：
① 父元件中在引入的子元件中寫入 ref = "mychild" mychid為自己定義的範例名
② 在函數中寫 this.refs.mychild.testNum()， 「testNum」為子元件中定義的函數名
③子元件定義一個函數，讓父元件呼叫即可
④這個方法也可以進行傳值，在括號中傳入值，子元件接收即可
以上就是vue父子元件的互相傳值和呼叫的詳細內容，更多關於vue父子元件的傳值和呼叫的資料請關注it145.com其它相關文章！
相關文章