Vue组件开发三板斧：prop、event、slot

组件，有些可以完全独立运行完全不依赖外部属性，比如层级较高的页面组件。但大多时候，组件还是需要使用方做一些定制操作，并可以在状态变化时通知给使用方，于是，一个组件最基本的API就是prop、event、slot，只要了解它们，那么再复杂的功能也能够做出来。

1.组件属性定义 prop

prop 定义了这个组件有哪些可配置的属性，可通过父组件传递进来。如果是对象类型，比如对象或数组，它的默认值必须从一个工厂函数获取。
格式如下：

// 子组件  my-component

很多情况下，组件的数据属性是动态的。通常，父组件通过接口拉取数据，然后再更新组件属性数据。如果不做些特殊处理，你会发现，当组件属性变化时，组件不会更新。
这时，需要用watch监听组件属性，同时在组件内声明一个变量，当监听的属性发生变化时，同步修改该变量。
模板中，不要直接使用属性，而改为组件变量值。

props: {
   show: {
     type: Boolean,
      default: true
   }
 },
data() {
   return {
     isVisible: true
   };
 },
watch: {
   show: function(val) {
     this.isVisible = val;
   }
 }

上面的例子比较简单，监听了一个简单类型属性。如果是对象类型，且该对象可能包含子对象，且属性发生变更就是内部子对象变化，那么，需要用到深度监听。
那么，改造一下props: data的监听器。

watch: {
    data: {
      deep: true,
      immediate: true,
      handler: function(val) {
        this.formData = { ...val };
      }
    }
  },

这样看起来貌似完美了。但是，如果父组件定义了一个空对象属性数据，但真实值是复杂对象呢？

// 父组件

运行之后你会发现，哪怕对组件属性data做了深度监听，但是，当数据发生变化时，不会触发watch。
为什么呢？
很简单，Vue2.0用的是Object.defineProperties监听数据变化，而此方法不能监听到对象新增或者删除操作。
解法也很简单，在初始化组件数据时，把可能用到的子对象都定义好。

export default {
    data() {
      return {
        data: { list:[], size:0 }
  };
},

然后再试试，OK了。

吐槽一下，相同功能，React不需要都这么大弯子。当组件属性变化，React会自动触发组件的render函数。这是因为Vue本身对组件更新渲染做了底层处理，而React把这些交给使用者，使用方可根据shouldComponentUpdate做优化

2. 组件间通信 event

$emit函数

这个比较简单，当组件状态发生变化或者完成某些操作后，需要通知父组件，调用$emit函数。

// 子组件
export default {
  methods: {
    onSubmit() {
      this.$emit("getList", this.formData);
    }
  }
}
// 父组件

export default {
  methods: {
    getDataList(formData) {
      // doing something
    }
  }
}

除了$emit，还有另外两种方式（这两种方法的弊端是，无法在兄弟间通信）：

• ref：给元素或组件注册引用信息；
• $parent / $children：访问父 / 子实例。

ref引用

// 子组件：my-component
export default {
  data () {
    return {
      title: 'my component'
    }
  },
  methods: {
    sayHello () {
      window.alert('Hello');
    }
  }
}

// 父组件

ref最常见的就是表单引用，可以在父组件里面做一些表单验证，或者表单清理的工作。

// form是组件的ref
// mainForm是组件内表单的ref
this.$refs.form.$refs.mainForm.clearValidate();

$parent 和 $children

基于当前上下文访问父组件或全部子组件。
场景：使用element-ui的抽屉组件时，'visible'值很重要。如果把它设置为组件内部变量，同时监听属性'visible'，那么，当关闭抽屉时，必须通知父组件更新属性变量（打开对话框的行为，是父组件发起的）。如果不更新父组件状态，那么关闭之后再次点击按钮不会触发属性变化，那么自然watch事件不会被触发。

// 子组件 my-drawer

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isDrawerVisible: false
    };
  },
watch: {
    visible: function(val) {
      this.isDrawerVisible = val;
    }
  },
methods: {
    handleClose() {
      // 修改父组件变量值
      this.$parent.visible = false;
    },
}

// 父组件

export default {
  data() {
    return {
      visible: false
    };
  }

3. 插槽 slot

用于分发组件的内容。这个官网文档讲解很清楚：https://cn.vuejs.org/v2/guide/components-slots.html

场景：比较多了。比如我们可能通过 slot做顶层的统一页面布局：