Vue组件传值（父子组件传值，兄弟组件传值）

最新推荐文章于 2023-12-08 17:36:06 发布

今天瘦了么233

最新推荐文章于 2023-12-08 17:36:06 发布

阅读量308

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_54441002/article/details/117001943

版权

Vue组件传值（父子组件传值，兄弟组件传值）

Vue组件传值分为三种方式：父传子，子传父，兄弟组件之间传值

下面咱们根据顺序一一分享：

一、父组件向子组件传值（props）

父组件向子组件传值，核心就是利用在父组件中给子组件标签添加自定义属性，子组件在其内部，通过props接收组件身上被添加的指定属性；

在子组件中通过props来接收父组件传递过来的内容，具体是通过属性名来接收，父组件向子组件传值的时候，属性有两种绑定方式，一种是写死的静态方式，一种是v-bind动态绑定的属性值传递，属性也可以传递多个，就是在props里面再加多个属性来接收就行；

props属性值类型：[String Number Boolean Array Object ]

下面我们来看看静态绑定属性和动态绑定属性所演示的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <script src="./js/vue.js"></script>
    <div id="app">
        <div>{
  {pmsg}}</div>
        <!--1、menu-item  在 APP中嵌套着 故 menu-item   为  子组件      -->
        <!-- 给子组件传入一个静态的值 -->
        <menu-item title='来自父组件的值'></menu-item>
        <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle  
            来自父组件data 中的数据 . 
            传的值可以是数字、对象、数组等等
        -->
        <menu-

最低0.47元/天解锁文章

今天瘦了么233

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue组件传值（父子组件传值，兄弟组件传值）

Vue组件传值（父子组件传值，兄弟组件传值）Vue组件传值分为三种方式：父传子，子传父，兄弟组件之间传值下面咱们根据顺序一一分享：一、父组件向子组件传值（props）父组件向子组件传值，核心就是利用在父组件中给子组件标签添加自定义属性，子组件在其内部，通过props接收组件身上被添加的指定属性；在子组件中通过props来接收父组件传递过来的内容，具体是通过属性名来接收，父组件向子组件传值的时候，属性有两种绑定方式，一种是写死的静态方式，一种是v-bind动态绑定的属性值传递，属性也可以
复制链接

扫一扫