当前位置：首页 > news >正文

百度网站公司信息推广怎么做/软件开发培训班

news 2025/7/1 5:34:52

百度网站公司信息推广怎么做,软件开发培训班,网站建设管理典型经验材料,做网站设计软件Vue3中的父子传值用的同样是自定义属性props和自定义事件emit,但是在具体使用上还要和vue2中有区别 （1）父组件向子组件传值：自定义属性：props 父组件代码： <template><div><div>父子组件的交互<…

Vue3中的父子传值用的同样是自定义属性props和自定义事件emit,但是在具体使用上还要和vue2中有区别

（1）父组件向子组件传值：自定义属性：props

父组件代码：


<template><div><div>父子组件的交互</div><button @click='money=200'>修改</button><hr><Child :money='money' /></div>
</template><script>
import Child from './Child.vue'
import { ref } from 'vue'export default {name: 'App',components: { Child },setup () {const money = ref(100)return { money }}
}
</script>

子组件代码：

<template><div>子组件 {{money}}</div><button @click='getMoney'>点击</button>
</template>
<script>
export default {name: 'Child',props: {money: {type: Number,default: 0}},setup (props) {// Vue3中，使用形参props获取所有父组件传递的数据// props的数据是只读的，不可以在子组件直接修改const getMoney = () => {console.log(props.money)}return { getMoney }}
}
</script>

总结：

1、父组件向子组件传值，子组件通过自定义属性props接收，

2、在子组件中js代码中要想接收到props的属性值，需要通过setup函数的第一个形参props获取

（2）子组件向父组件传值：自定义事件emit

<template><div><div>父子组件的交互</div><button @click='money=200'>修改</button><hr><Child :money='money' @send-money='getMoney' /></div>
</template><script>
import Child from './Child.vue'
import { ref } from 'vue'export default {name: 'App',components: { Child },setup () {const money = ref(100)const getMoney = (value) => {// value就是子组件传递回来的钱money.value = money.value - value}return { money, getMoney }}
}
</script>

<template><div>子组件 {{money}}</div><button @click='getMoney'>点击</button>
</template>
<script>
export default {name: 'Child',// 子组件触发的自定义事件需要在emits选项中进行声明（直观的看到本组件触发了那些自定义事件）emits: ['send-money'],props: {money: {type: Number,default: 0}},setup (props, context) {// Vue3中，使用形参props获取所有父组件传递的数据// props的数据是只读的，不可以在子组件直接修改const getMoney = () => {console.log(props.money)// this.$emit('send-money', 50)// 向父组件传递数据50context.emit('send-money', 50)}return { getMoney }}
}
</script>