到底用prop还是事件

最新推荐文章于 2024-10-01 18:51:18 发布

weixin_33989058

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量121

点赞数

文章标签： javascript webpack json ViewUI

原文链接：https://segmentfault.com/a/1190000007020763

版权

组件之间数据交互，主要有prop和事件两种。

prop

    <!-- 父组件 -->
    <template>
        <child :id="id"></child>
    </template>
    <script>
        export default {
            data() {
                return {
                    id: 1
                }
            },
            ready() {
                setTimeout(() => {
                    this.id = 2;
                }, 1000);
            }
        }
    </script>
    
    <!-- child组件 -->
    <template></template>
    <script>
        export default {
            props: {
                id: {
                    type: Number,
                    default: 0
                }
            },
            data() {
                return {}
            },
            methods: {
                handler() { }
            },
            watch: {
                //通过watch监听id的变化来执行methods
                id() {
                    this.handler();
                }
            }
        }
    </script>

事件

<!-- 父组件 -->
<template>
    <child :id="id"></child>
</template>
<script>
    export default {
        data() {
            return {
                id: 1
            }
        },
        ready() {
            setTimeout(() => {
                this.$broadcast('child-set-data', {
                    id: 2
                });
            }, 1000);
        }
    }
</script>

<!-- child组件 -->
<template>
    
</template>
<script>
    export default {
        props: {
            id: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {}
        },
        methods: {
            handler() { }
        },
        events: {
            //通过events来接收父组件派发下来的事件来执行methods
            child-set-data(o) {
                this.handler();
            }
        }
    }
</script>

那如何优雅的选择呢？
笔者觉得可以在数据功能上进行区分。
比如上面的场景，是由于子组件child在知道id改变后，在它自己的作用域里去执行handler()方法，handler可能是一个需要ajax获取数据并渲染到child组件上的函数(ajax在child组件中完成的)，这时候就推荐用watch来监听id的改变了。
如果handler所对应的ajax任务是在父组件完成的，父组件需要将拿到的一堆json数据传给child时，这时可以通过事件来传递。