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

主要分为两类:

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>
上一篇:剑指offer计划4(查找算法简单版)---java


下一篇:Python发送邮件最简单实现-zmail