微信小程序自定义组件父子组建传值
时间: 2023-05-27 10:01:41 浏览: 124
在微信小程序中,父组件向子组件传值可以使用属性传值的方式,在父组件中设置属性,在子组件中接收,如下所示:
父组件:
```
<template>
<child-component prop-a="value-a"></child-component>
</template>
<script>
import childComponent from './child-component.vue'
export default {
components: {
'child-component': childComponent
}
}
</script>
```
子组件:
```
<template>
<div>{{ propA }}</div>
</template>
<script>
export default {
props: {
propA: {
type: String,
default: ''
}
}
}
</script>
```
这样,在父组件中设置 `prop-a` 属性的值为 `value-a` ,子组件中通过 `$props` 对象获取并显示 `propA` 值。
而子组件向父组件传值则需要使用自定义事件,在子组件中触发事件,在父组件中监听并接收,如下所示:
子组件:
```
<template>
<button @click="onBtnClick">Click me</button>
</template>
<script>
export default {
methods: {
onBtnClick() {
this.$emit('event-name', 'value')
}
}
}
</script>
```
父组件:
```
<template>
<child-component @event-name="onEvent"></child-component>
</template>
<script>
import childComponent from './child-component.vue'
export default {
components: {
'child-component': childComponent
},
methods: {
onEvent(value) {
console.log('received value: ', value)
}
}
}
</script>
```
这样,当子组件中的按钮被点击后,会触发 `event-name` 事件并传递一个值,在父组件中监听该事件,并接收传递的值。