Vue3.0的父子传值

最新推荐文章于 2024-08-26 16:28:42 发布

「已注销」

最新推荐文章于 2024-08-26 16:28:42 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44316317/article/details/122474228

版权

本文介绍了Vue3.0中父子组件之间的通信方式。对于父组件向子组件传值，需将数据转化为响应式然后绑定。子组件向父组件传值则通过自定义事件实现。

摘要由CSDN通过智能技术生成

Vue3.0的父子传值

1.父组件向子组件传值

父组件：

<template>
<div>
    <h1>父组件<h1>
    <hr>
    <son :money="money">
</div>
</template>
<script>
import {ref} from 'vue'
import son from './son.vue'
export default {
  name:'App',
  components:{
    Son
}
//父组件的数据传递给子组件
setup(){
  const money = ref(100);
  return {money}
}
}
</script>

注：Vue3.0中父组件向子组件中传值和Vue2.0中传值一样只不过要按照Vue自己的方式将自己的数据变成响应式的数据进行绑定。

子组件：

<template>
<div>
    <h1>子组件</h1>
    <hr>
    <div>{
  {money}}</div>
</div>
</template>
<script>
    import {onMounted} from 'vue'
    export default{
        name:'App',
         props:{
                money:{
                    type:Number