Vue组件之组件间数据交互

最新推荐文章于 2024-01-28 21:17:33 发布

Akimoto Hiroshi

最新推荐文章于 2024-01-28 21:17:33 发布

阅读量600

点赞数

分类专栏： vue 文章标签： vue javascript js

本文链接：https://blog.csdn.net/dyw3390199/article/details/111090752

版权

vue 专栏收录该内容

102 篇文章 5 订阅

订阅专栏

父组件向子组件传递值

在这里插入图片描述
先看一个父组件向子组件传递数据的例子：

父组件通过属性的方式静态传递值给子组件，子组件通过props接收，效果如下：

父组件还可以通过动态绑定的方式动态传值给子组件：
在这里插入图片描述

还可以混搭传值：

==注意：==props属性命名规则：
在这里插入图片描述

注意： v-bind绑定和不加冒号绑定区别：

<body>
    <div id="app">
        <div>{{ pmsg }}</div>
        <menu-item a="true" :b="true" c="14" :d="14"></menu-item>
    </div>
    <script>
        Vue.component('menu-item', {
            props: ['a','b','c','d'],
            data: function () {
                return {
                    msg: 'Data within child component'

                }
            },
            template: `
                        <div>
                            <div>
                                <span>Value</span>
                                <span>&nbsp</span>
                                <span>Type</span>
                            </div>
                            <div>
                                {{ a }} {{ typeof a }}
                            </div>
                            <div>
                                {{ b }} {{ typeof b }}
                            </div>
                            <div>
                                {{ c }} {{ typeof c }}
                            </div>
                            <div>
                                {{ d }} {{ typeof d }}
                            </div>
                        </div>
            `
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: 'message from parent component'
            },
            methods: {

            }
        })

在这里插入图片描述
结果：

v-bind绑定可以保留数值的原始类型，不加冒号绑定结果都是字符串

父子组件传递数值之传数组：

<body>
    <div id="app">
        <menu-item :a="arr"></menu-item>
    </div>
    <script>
        Vue.component('menu-item', {
            props: ['a'],
            template: `
            <ul>
                <li :key="index" v-for="(item,index) in a">{{ item }}</li>
            </ul>
            `
        })
        var vm = new Vue({
            el: '#app',
            data: {
                arr: ['Vue','React','Flutter','Jquery','Angular','Backbone']
            },
            methods: {

            }
        })
    </script>
</body>

结果：
在这里插入图片描述

父子组件传递数值之传对象：

在这里插入图片描述
结果：

子组件向父组件传递值

在这里插入图片描述

<script>
        Vue.component('menu-item',{
            props:['val'],
            template:`
            <div>
                <ul>
                    <li :key="index" v-for="(item,index) in val">{{ item }}</li>
                </ul>
                <button @click="val.push('Node')">Click</button>
            </div>
            `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                arr:['Vue','React','Angular']
            },
            methods: {

            }
        })
    </script>

结果：
在这里插入图片描述
我们可以在子组件中去操作父组件中的数组，但是强烈不推荐这样做

注意 props传递数据有一个原则：单向数据流原则

那么子组件怎么才能向父组件传递信息呢？

通过自定义事件$emit传递

在这里插入图片描述
我们先通过自定义事件的方式让子组件操作父组件的数据：

结果：

我们现在来从子组件传递数据给父组件：

<script>
        Vue.component('menu-item',{
            props:['val'],
            template:`
            <div>
                <ul>
                    <li :key="index" v-for="(item,index) in val">{{ item }}</li>
                </ul>
                <button @click="val.push('Node')">Click</button>
                <button @click="$emit('enlarge-it',20)">Enlarge!</button>
            </div>
            `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                arr:['Vue','React','Angular'],
                fontSize: 10
            },
            methods: {
                handle:function(val){
                    this.fontSize += val
                }
            }
        })
    </script>

在这里插入图片描述

Akimoto Hiroshi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue组件之组件间数据交互

父组件向子组件传递值先看一个父组件向子组件传递数据的例子：父组件通过属性的方式静态传递值给子组件，子组件通过props接收，效果如下：父组件还可以通过动态绑定的方式动态传值给子组件：还可以混搭传值：==注意：==props属性命名规则：注意： v-bind绑定和不加冒号绑定区别：<body> <div id="app"> <div>{{ pmsg }}</div> <menu-item
复制链接

扫一扫