首页 > 其他 > 详细

Vue3父传子props(组件之间通信)

时间:2021-04-07 20:36:59      阅读:28      评论:0      收藏:0      [点我收藏+]

在vue里创建一个父组件,和一个子组件

技术分享图片

 

 

 在App.vue先导入子组件

技术分享图片

 

 

 然后注册

技术分享图片

 

 

 

然后再 template 直接使用

<template >
    <div>
        <MyMain>
        </MyMain>
    </div>
</template >

如何传值

在使用的组件名上直接使用

<template >
    <div class="content"> 
          <MyMain msg=‘hello‘     //:props名字 =‘值‘
:title="msg"
                  :article=‘article‘>
          </MyMain>
        </div>
</template >

直接取data里的值,也可直接写值如 msg=‘hello‘ 

技术分享图片

 

 子组件接收值

MyMain 组件里使用props接收父组件传过来的值并定义属性类型

在类型为数组里,如果要使用default时可直接使用default:[‘我‘,‘是‘,‘大‘,‘帅‘,‘批‘]

技术分享图片

 

 随后直接使用即可,如果要往孙传值可以以像父传子一样继续往下传

技术分享图片

 

Vue3父传子props(组件之间通信)

原文:https://www.cnblogs.com/whenwei123/p/14628868.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!