VueHow to communicate between components? The following article will share with you more than ten Vue3 component communication methods. I hope it will be helpful to you!
##This article explains the basic usage of various communication methods ofAs we all know, a very important knowledge point inVue 3.2
components, and usessingle file component<script setup> .
Vue.js is component communication. Whether it is the development of business classes or component library development, each has its own communication method. [Related recommendations: vuejs video tutorial]
Vue 3.
The collection (learned) is your own!
Props
Parent component passes value to child component (abbreviation: parent to child)Props Document
https:/ /v3.cn.vuejs.org/guide/component-props.html Parent component
// Parent.vue
<template>
<!-- 使用子组件 -->
<Child :msg="message" />
</template>
<script setup>
import Child from './components/Child.vue' // 引入子组件
let message = '雷猴'
</script>
Copy after login
Child component
// Child.vue
<template>
<div>
{{ msg }}
</div>
</template>
<script setup>
const props = defineProps({
msg: {
type: String,
default: ''
}
})
console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props
</script><script setup> to declare props, which has full inference and is <script setup> is available directly. For more details, please see
.https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineprops-and-defineemits
at
Latest Articles by Author
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
