2020/08/01 vue组件间数据传递_vue组件之间的数据传递 2020-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44755188/article/details/107735948

一，父组件给子组件传递数据

我的理解是现在父组件中，找到需要数据的子组件
可以绑定固定数据,也可以是用v-bind绑定父组件可变的数据
如下名字是give 数据是父组件的msg，有个坑命名最好用全部小写
将give 在子组件的props数组中定义下才能用，定义完了，才能在子组件中使用
父组件的数据msg一改对应的用到他数据的子组件也会改

<body>
    <div id="app">
        <com1 :giveson='msg'></com1>
        <reg :give='msg'></reg>
        <reg give='固定信息'></reg>
    </div>
    <!-- <template id="son">
    <h1>子组件信息---{{giveSon}}</h1>
</template> -->
</body>
<script>
    Vue.component("reg", {
        props: ['give'],
        template: "<h3>全局子组件{{give}}</h3>",
    })
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "父组件数据"
        },
        components: {
            com1: {
                template: "<h1>子组件信息---{{giveson}}</h1>",
                props: ['giveson'],
            }

        }
    })
</script>

如果要用驼峰命名怎么办注意要在DOM元素中用短横线来连接如下

<body>
    <div id="app">
        <com1 :give-son='msg'></com1>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "父组件数据"
        },
        components: {
            com1: {
                template: "<h1>子组件信息---{{giveSon}}</h1>",
                props: ['giveSon'],
            }

        }
    })
</script>

那为什么是这样呢因为DOM元素的属性是不区分大小写的你写giveSon 其实就是giveson 他就会看props里面有没有giveson，一看只有giveSon 就报错，用下列程序可验证下上面的说法

<body>
    <div id="app">
        <com1 :giveSon='msg'></com1>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "父组件数据"
        },
        components: {
            com1: {
                template: "<h1>子组件信息---{{giveson}}</h1>",
                props: ['giveson'],
            }

        }
    })
</script>

二：子组件使用父组件的方法通过$emit() 触发

<body>
    <div id="app">
        <com1 @fun='show'></com1>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            show(data) {
                console.log(data);
            }
        },
        components: {
            com1: {
                template: "<button @click='useMethod'></button>",
                methods: {
                    useMethod() {
                        this.$emit('fun', this.sonmsg);
                    }
                },
                data() {
                    return {
                        sonmsg: "子组件调用show方法传递过去的数据"
                    }
                }
            },

        }
    })
</script>

三，组件向父组件传递数据

拿到父组件的数组后,来向数组添加数据可以实现子组件向父组件添加数据，但是这不被推荐的

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

<body>
    <div id="app">
        <com1 :arr='arr'></com1>
    </div>
    <template id="com1">
        <div>
            <ul>
                <li v-for='(item,i) in arr' :key='i'>{{item}}</li>
            </ul>
            <button @click="add(arr)">添加</button>
        </div>
    </template>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            arr: ["aa", 'bb']
        },
        components: {
            com1: {
                template: '#com1',
                props: ['arr'],
                methods: {
                    add(arr) {
                        arr.push('cc');
                    }
                },
                data() {
                    return {
                        sonmsg: "子组件调用show方法传递过去的数据"
                    }
                }
            },

        }
    })
</script>