vue组件封装技巧
vue组件封装技巧$attrs$listenersinheritAttrs$attrs用途:在对组件进行二次封装的时候会出现孙子组件的传值问题,如果都通过prop进行层层传递太过麻烦定义:包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时,这里会包含所有父作用域的绑定 (class 和 style 除外),
$attrs
用途:在对组件进行二次封装的时候会出现孙子组件的传值问题,如果都通过prop进行层层传递太过麻烦,可以选择不使用props传值而通过$attrs传递
定义:包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=”$attrs” 传入内部组件——在创建更高层次的组件时非常有用。
用法:父组件正常传入数据,子组件通过在孙组件上v-bind=:"$attrs"将未props声明的数据传递,孙组件通过this.$atrs.xxx进行使用
父组件:
子组件
子组件打印$attrs
孙组件
孙组件打印$attrs
$listeners
同$attrs的作用类似,$listeners可以将孙组件的事件和参数传递给父组件
孙组件:
子组件:
其中console打印:
父组件:
父组件中正常使用即可
注:打印中msgA多执行了一次且是undefined是因为子组件中事件进行了从写重写;需要删掉;如果子组件需要用到改事件,暂不知道用法
inheritAttrs
定义:官方定义
父组件:
子组件
设置inheritAttrs: true时,
设置为false 时
不过通过$attrs依然能获得传入的数据。
provide/inject
https://cn.vuejs.org/v2/api/
可用于祖孙级组件直接的传值
provide 选项应该是一个对象或返回一个对象的函数
inject 选项应该是:
一个字符串数组,或一个对象,对象的 key 是本地的绑定名
更多推荐
所有评论(0)