vue3--子传父,父子组件传值
vue3--子传父,父子组件传值
·
子传父:触发自定义事件的时候emit来自 setup(props,{emit}){ // emit 就是触发事件函数 }
父组件:
<template>
<div id="container">
<h1>父组件</h1>
<div>{{ money }}</div>
<hr />
<son-two :mon="money" @change-money="unpdataMoney"></son-two>
</div>
</template>
<script>
import { ref } from "vue";
import SonTwo from "./SonTwo.vue";
export default {
name: "App",
components: {
SonTwo,
},
setup() {
const money = ref(101);
const unpdataMoney = (newMoney) => {
money.value = money.value- newMoney;
};
return { money, unpdataMoney };
},
};
</script>
<style lang='less' scoped>
</style>
子组件:
<template>
<div id="container">
<h3>子组件</h3>
<div>子组件内容:{{mon}}</div>
<button @click="changeMoney">-1按钮</button>
</div>
</template>
<script>
import { onMounted } from 'vue'
export default {
name: "SonTwo",
props: {
mon: {
type: Number,
default: 0
}
},
/**
* props 父组件数据
* emit 触发自定义事件函数
*/
setup(props,{emit}) {
// 获取父组件的数据money
console.log(props.mon)
// 向父组件传值
const changeMoney = () => {
emit('change-money',1)
}
return { changeMoney};
},
};
</script>
<style lang='less' scoped>
</style>
console面板:
setup(props,context) {
// 获取父组件的数据money
console.log(props.mon)
console.log(context)
// 向父组件传值
const changeMoney = () => {
context.emit('change-money',1)
}
return { changeMoney};
},
更多推荐
已为社区贡献21条内容
所有评论(0)