第六篇 组件(下)

父子组件传事件

• 事件传递流程：
  • 点击“放大描述字号”按钮时，触发onDescFontSizeClick方法，此方法是查找一个注册过的事件this.$root.$emit('descFontSizeAdd', 1)并传参数1。
  • 子组件中注册过事件：this.$root.$on('descFontSizeAdd', function (num) { $this.fontSize += num; })接收参数并触发动作。
• $root是为了取到当前DOM元素的Vue对象。
• 注意触发事件.$emit()和注册事件.$on()前面的$符号

插槽简单演示

插槽演示-Blog

• 具名插槽：在组件中定义时写好name属性，页面使用时在slot属性里写定义时对应的name值。
• 页面中用刀的数据应该写在new Vue时，而不能在定义组件时。组件里定义的数据只能在组件模板里访问。

动态组件

• 先用<component>标签占位后，通过给属性is绑定一个包含template内容的对象(也就是定义组件的对象)来决定这里显示哪个组件。
• 用<keep-alive>包住<component>组件后，半年多前的测试结果是控制台的提示仍然有，而现在测试却没有看到对这个组件的提示

异步组件

标准定义方式

• 把原来注册组件的对象换成一个构造Promise对象时的参数函数(工厂函数)，这个函数又有resolve和reject两个参数。函数内发异步请求， 成功时可调用resolve并传入一个定义组件的对象，即可渲染此组件； 而失败时不会渲染，控制台报错并会把reject的参数字符串化打印出来

Promise定义方式

• 和标准定义方法相比，先定义一个Promise对象，然后把定义组件的工厂函数换成一个返回这个Promise对象的工厂函数即可。
• 如果用Webpack构建，可以把上述Promise对象用import('./my-async-component')代替，当然导入的这个模块本身要返回一个Promise对象

高级定义方式

• 以上两种都无法正确展示加载失败时要渲染的组件，而这种方法可以，而且可方便调用自定义加载时动画组件。整体来说比上述两种都有优势，推荐使用。
• 和Promise定义的方法相比，将工厂函数里面要返回的Promise对象替换为一个规定好属性的对象，只需给这几个属性赋值即可：

    const AsyncComponent = () => ({
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: import('./MyComponent.vue'),
    // 异步组件加载时使用的组件
    loading: LoadingComponent,
    // 加载失败时使用的组件
    error: ErrorComponent,
    // 展示加载时组件（即loading，对其他无效）的延时时间。默认值是 200 (毫秒)
    delay: 200,
    // 如果提供了超时时间且组件加载也超时了，
    // 则使用加载失败时使用的组件。默认值是：`Infinity`
    timeout: 3000
  })