vue3 父组件调用vue2子组件并且传参
时间: 2023-08-19 21:05:22 浏览: 98
vue 父组件中调用子组件函数的方法
5星 · 资源好评率100%
在Vue3中,父组件调用Vue2子组件并传递参数的方法与Vue2中相同。你可以使用props属性将数据从父组件传递给子组件。首先,在父组件中引入子组件,并在父组件的template中使用子组件,并通过props属性传递参数。例如:
```javascript
// 父组件
<template>
<div>
<component-a :msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a>
</div>
</template>
<script>
import componentA from './components/componentA'
export default {
components: {
componentA
},
data() {
return {
childWords: ""
}
},
methods: {
listenToMyBoy(msg) {
this.childWords = msg
}
}
}
</script>
```
在子组件componentA中,你可以通过props属性接收父组件传递的参数。例如:
```javascript
// 子组件componentA
<template>
<div>
<button @click="handleClick">Click me</button>
</div>
</template>
<script>
export default {
props: \['msgfromfa'\],
methods: {
handleClick() {
this.$emit('child-say', this.msgfromfa)
}
}
}
</script>
```
这样,当在子组件componentA中点击按钮时,会触发"child-say"事件,并将父组件传递的参数msgfromfa传递给父组件的listenToMyBoy方法,然后将msg赋值给childWords,最后在父组件的template中显示childWords的值。
#### 引用[.reference_title]
- *1* *2* *3* [【vue】父向子组件传参、子组件向父传参、vue中父组件调用子组件函数、子组件向父组件调用方法](https://blog.csdn.net/weixin_42401291/article/details/90549791)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文