vue3父组件点击按钮向子组件传值样例代码,且父组件不含export
时间: 2023-06-08 13:04:12 浏览: 139
详解vue.js2.0父组件点击触发子组件方法
抱歉,我能够回答您的问题。以下是示例代码:
父组件:
```html
<template>
<div>
<button @click="sendValueToChild">{{ buttonText }}</button>
<child-component :valueFromParent="parentValue"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
buttonText: '传递值',
parentValue: ''
}
},
methods: {
sendValueToChild() {
this.parentValue = '这是从父组件传递的值'
}
}
}
</script>
```
子组件:
```html
<template>
<div>
<p v-if="valueFromParent">
父组件传递的值为: {{ valueFromParent }}
</p>
</div>
</template>
<script>
export default {
props: {
valueFromParent: String
}
}
</script>
```
在父组件中,我们使用 `button` 元素来触发 `sendValueToChild` 方法,该方法将 `parentValue` 设置为字符串值。我们将该值传递给子组件 `child-component` (也可以使用其他组件名称,但必须与定义的组件名称相同)。在子组件中,我们使用 `valueFromParent` 属性来接收来自父组件的传递值,并在页面上渲染出来。
阅读全文