Vue中组件间传值常用的几种方式

用户9184480

发布于 2024-12-17 15:17:43

15900

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

主要分为两类：

1.父子组件间的传值

2.非父子组件间的传值

1.父子组件间传值

父组件向子组件传值

第一种方式:

props

父组件嵌套的子组件中，使用v-bind:msg=‘xxxx’进行对象的绑定，子组件中通过定义props接收对应的msg对象如图

父组件代码

```

传递多个值

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传递多个值</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <!-- 使用blog-content组件 -->
        <blog-content></blog-content>
    </div>
    <script>
        const vm = Vue.createApp({});
        //创建组件；
        vm.component('blog-content', {
            //使用blog-title组件，并传递content
            template: '<div><blog-title :name="name" :price="price" :num="num"></blog-title></div>',
            data: function () {
                return { name: '苹果', price: "6.88元", num: "2800公斤" }
            }
        });
        //注册子组件;
        vm.component('blog-title', {
            props: ['name', 'price', 'num'],
            template: '<ul><li>{{name}}</li><li>{{price}}</li><li>{{num}}</li></ul>'
        })
        //指定在dom的元素上装载应用程序实例的根组件;
        vm.mount('#app');
    </script>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-29，如有侵权请联系 cloudcommunity@tencent.com 删除

苹果