到底用prop还是事件

组件之间数据交互，主要有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时，这时可以通过事件来传递。

参考

• Vue+Webpack 使用规范