一、父組件向子組件傳值
1、在父組件中引入子組件
import Son from './Son'
2、在父組件中使用v-bind系結資料到子組件
<son v-bind:msg="msg"></son>
3、在子組件中使用props接收
props: {
msg: { // 屬性名來自父組件的資料源的key
type: String, // 當前msg所屬的型別
default: '' // 如果取不到的默認值
},
},
二、子組件向父組件傳值
1、在子組件中創建點擊事件
<button @click="sendToParent"></button>
2、子組件資料的準備
data() {
return {
str: '子組件傳值到父組件：0420'
}
},
methods: {
sendToParent() {
this.$emit('show',this.str)
}
},
3、父組件接收
<son v-bind:msg="msg" @show="getData"></son>
4、父組件中定義方法進行接收
data() {
return {
msg: '來自父組件的值:123456',
abc:''
}
},
methods: {
getData(val) { // 這里的val是取出的子組件str值
this.abc=val // 將val值賦給abc 并取值顯示
}
},
三、綜合代碼展示
1、Parent.vue
<template>
<div>
<h3>我是父組件</h3>
<!-- 使用組件 并使用v-bind系結傳值 -->
<son v-bind:msg="msg" @show="getData"></son>
<hr>
{{abc}}
</div>
</template>
<script>
// 父組件向子組件傳值
// 1、在父組件中引入子組件
// 2、注冊子組件 vcompon
// 3、使用組件 并使用v-bind系結傳值
import Son from './Son'
export default {
components: {
Son,
},
data() {
return {
msg: '來自父組件的值:123456',
abc:''
}
},
methods: {
getData(val) { // 這里的val是取出的子組件str值
this.abc=val // 將val值賦給abc 并取值顯示
}
},
};
</script>
<style lang="scss" scoped>
</style>
2、Son.vue
<template>
<div>
<h3>我是子組件</h3>
{{msg}}
<br>
<button @click="sendToParent">點擊顯示</button>
</div>
</template>
<script>
// 接收父組件的傳值
export default {
props: {
msg: { // 屬性名來自父組件的資料源的key
type: String, // 當前msg所屬的型別
default: '' // 如果取不到的默認值
},
},
data() {
return {
str: '子組件傳值到父組件0420'
}
},
methods: {
sendToParent() {
this.$emit('show',this.str)
}
},
};
</script>
<style lang="scss" scoped>
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/273679.html
標籤：其他
上一篇：Vue 3 不再支持 IE11