Vue组件化开发（五）| 一起学系列

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

• 其他通信方式-$root（不推荐使用）

  • 用来访问当前组件树根实例，设置简单的Vue应用时可以通过此方式进行组件传值 除了$root，Vue还提供了$parent与$children用于便捷父子组件，但也会修改根组件的数据，不推荐使用

• 其他通信方式-$refs（不推荐使用）

  • 用于获取设置了ref属性的HTML标签或子组件
  • 给普通HTNL标签设置ref属性，$refs可以获取DOM对象
  • 给子组件设置ref属性，渲染后可通过$refs获取子组件实例

• 组件插槽

  • 可以便捷的设置组件内容

• 单个插槽

  • 如果我们希望组件标签可以像HTML标签一样设置内容，那么组件的使用灵活性会很高
  • 但平常书写的组件，组件首尾标签中书写的内容会被抛弃
  • 通过<slot>进行插槽设置
  • 需要注意模板内容的渲染位置
    • 注意：父组件视图中只能使用父组件的数据，不能直接使用子组件中的数据，下图中，如果将parValue改成value会报错
  • 可以在<slot>中为插槽设置默认值，也称为后备内容；当父组件视图中不设置数值时，可以填充默认值

• 具名插槽

  • 如果组件中有多个位置需要设置插槽，根据需要要给<slot>设置name，称为具名插槽 <template>是一个内容模板元素，可以标识某部分区域，该内容在加载页面时元素内容不会被渲染，但是会处理其内容。v-slot只能在template标签中使用 中间没有设置name时，默认会设置v-slot的值为default，可以简写 为了方便书写，简写形式如下

• 作用域插槽

  • 用于让插槽可以使用子组件的数据，解决上面的案例中遇到的问题
  • 组件将需要被插槽使用的数据通过v-bind绑定给<slot>,这种用于给插槽传递数据的属性称为插槽prop
  • 组件绑定数据后，插槽中需要通过v-slot接收数据，dataObj是一个由所有插槽prop组成的对象
  • 如果只存在默认插槽，同时又需要接收数据，可以进行简写，省略template标签，仅限一个插槽时使用 甚至可以更简化：也可以写成#default = "dataObj"
  • 通过ES6的解构操作进行数据接收

本期的内容就到这里啦！让我们明天一起继续学习Vue.js吧!