vue—组件传值

最新推荐文章于 2024-05-24 15:48:22 发布

FierceALiang

最新推荐文章于 2024-05-24 15:48:22 发布

阅读量101

点赞数

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

本文链接：https://blog.csdn.net/FierceALiang/article/details/115431364

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue—组件传值

父组件传值给子组件—“props”

父组件—示例

<template>
    <child :choose-data="chooseData"></child>
</template>

<style scoped>
</style>

<script>

    /**
     * Created by *** on 2021/3/9
     */

    import Child from './child_components'

    export default {
        components: {
            Child
        },

        data() {
            return {
                chooseData: [0, 1, 2]
            };
        }
    }
</script>

子组件—示例

<template>
    
</template>

<style scoped>
</style>

<script>

    /**
     * Created by *** on 2021/3/9
     */

    export default {
        props: {
            chooseData: {
                type: Array
            }
        },
        
        data() {
            return {};
        },

        watch: {
            // 监听父组件传递过来的chooseData的变化
            chooseData: {
                // immediate如果为true 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法
                immediate: true,
                handler: function () {
                    if (this.chooseData.length) {
                        this._loadDta(this.chooseData);
                    }
                }
            }
        },
        
        methods:{
            _loadDta(chooseData){
                window.console.log(chooseData)
            }
        }
    }
</script>

子组件传值给父组件—“$emit”

注意：“$emit”在子组件传值给父组件时也同时在调用父组件中的方法，即此方法是一举两得

子组件——示例

<template>

</template>

<style scoped>
</style>

<script>

    /**
     * Created by *** on 2021/3/9
     */

    export default {
        props: {
            chooseData: {
                type: Array
            }
        },

        data() {
            return {};
        },

        watch: {
            // 监听父组件传递过来的chooseData的变化
            chooseData: {
                // immediate如果为true 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法
                immediate: true,
                handler: function () {
                    if (this.chooseData.length) {
                        this._loadDta(this.chooseData);
                    }
                }
            }
        },

        methods: {
            _loadDta(chooseData) {
                window.console.log(chooseData);
                
                // 'res'为从后端获取到的数据

                // 监听到父组件传递过来的chooseData后从后端获取数据，完了之后再将获取到的数据传递给父组件
                this.transferHistogramData(res.data.data.histogram);
            },

            // 将后端传过来的柱状图数据通过'$emit'传递给父组件
            // 注意：'getHistogramData'为父组件中引用子组件时绑定的方法名"@getHistogramData='getHistogramData'"
            // 'histogramData'表示子组件以参数的方式将数据传递给父组件
            transferHistogramData(histogramData) {
                this.$emit('getHistogramData', histogramData);
            }
        }
    }
</script>

父组件—示例

<template>
    <child @getHistogramData="getHistogramData"></child>
</template>

<style scoped>
</style>

<script>

    /**
     * Created by *** on 2021/3/9
     */

    import Child from './child_components'

    export default {
        components: {
            Child
        },

        data() {
            return {
                histogramData: ''
            };
        },

        methods: {

            // 接收子组件传递过来的data数据
            getHistogramData(data) {
                this.histogramData = data;
            },
        }
    }
</script>

兄弟组件之间的传值

方法一：

如果兄弟组件全部都引用到父组件中，则可以将父组件作为载体，实现兄弟组件之间相互传值

方法二：

首先新建一个起过渡作用的中间件—handler.js

中间件handler.js（自己理解，无从考证）

/**
 * Created by *** on 2021/3/
 */


import Vue from 'vue';

export default new Vue();

组件一brother1—示例

<template>

</template>

<style scoped>
</style>

<script>

    /**
     * Created by *** on 2021/3/9
     */

    import handler from './handler';

    export default {
        data() {
            return {};
        },

        methods: {
            
            // 页面切换之后对应的tab值
            // 每切换一个tab页面，则将tab值借助handler实时传递给兄弟组件brother2
            afterShowTab(tabInstance, tabNum) {
                if (tabNum === 0) {
                    handler.$emit('changeActiveItem', tabNum);
                }
                if (tabNum === 1) {
                    handler.$emit('changeActiveItem', tabNum);
                }
                if (tabNum === 2) {
                    handler.$emit('changeActiveItem', tabNum);
                }
            },
        }
    }
</script>

组件二brother2—示例

<template>
    <h1>当前页面的tab值：{{activeItem}}</h1>
</template>

<style scoped>
</style>

<script>

    /**
     * Created by *** on 2021/3/9
     */

    import handler from './handler'

    export default {
        data() {
            return {
                activeItem: ''
            };
        },

        mounted() {

            // 当页面渲染完成后，监听brother1兄弟组件传递过来的tabNum值
            // 当前组件要保证与brother1兄弟组件的页面tab值保持一致
            handler.$on('changeActiveItem', (tabNum) => {
                this.activeItem = tabNum;
            });
        },
    }
</script>

vue组件中的方法互相调用

父组件调用子组件中的方法

父组件—示例

<template>
    <div>
        <child ref="childComponents"></child>
        <button @click="fatherMethod()">点击触发子组件的'ChildMethod'方法</button>
    </div>

</template>

<style scoped>
</style>

<script>

    /**
     * Created by *** on 2021/3/9
     */

    import Child from './child_components'

    export default {
        components: {
            Child
        },

        data() {
            return {};
        },

        methods: {

            fatherMethod() {
                this.$refs.childComponents.ChildMethod()
            }
        }
    }
</script>

子组件—示例

<template>
</template>

<style scoped>
</style>

<script>

    /**
     * Created by *** on 2021/3/9
     */

    export default {
        data() {
            return {};
        },

        methods: {
            ChildMethod() {
                window.console.log('父组件调用子组件方法测试');
            }
        }
    }
</script>

子组件调用父组件中的方法

方法一：

使用 “$emit” 在子组件调用父组件的方法时同时将所需数据传递给父组件

方法二：

使用 “$parent” 也可以实现子组件调用父组件的方法

子组件—示例

<template>
    <div>
        <button @click="childMethod()">点击触发父组件的'fatherMethod'方法</button>
    </div>
</template>

<style scoped>
</style>

<script>

    /**
     * Created by *** on 2021/3/9
     */

    export default {
        data() {
            return {};
        },

        methods: {
            childMethod() {
                this.$parent.fatherMethod();
            }

        }
    }
</script>

父组件—示例

<template>
    <child></child>
</template>

<style scoped>
</style>

<script>

    /**
     * Created by *** on 2021/3/9
     */

    import Child from './child_components'

    export default {
        components: {
            Child
        },

        data() {
            return {};
        },

        methods: {

            fatherMethod() {
                window.console.log('子组件调用父组件方法测试');
            }
        }
    }
</script>