到底用prop还是事件

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

  • prop

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!-- 父组件 -->
    <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>
  • 事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <!-- 父组件 -->
    <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时,这时可以通过事件来传递。

参考

坚持原创技术分享,您的支持将鼓励我继续创作!