cdr可以做网站页面吗,典型的o2o平台有哪些,网站免费正能量链接,百度收录好最快的网站Vue中$attrs的作用和使用方法 1. 使用场景举例2. 官方解释3. 使用示例 $attrs是
vue2.4.0版本以上新增的属性#xff1b; 1. 使用场景举例 假如我们现在要二次封装一个组件#xff0c;我们需要把当前组件获取到的所有的props都传递给子组件#xff0c;我们可以在当前组件中… Vue中$attrs的作用和使用方法 1. 使用场景举例2. 官方解释3. 使用示例 $attrs是
vue2.4.0版本以上新增的属性 1. 使用场景举例 假如我们现在要二次封装一个组件我们需要把当前组件获取到的所有的props都传递给子组件我们可以在当前组件中接收所有的props然后将props传递给子组件这样难免有些繁琐Vue给我们提供了简单的实现方式就是$attrs。 2. 官方解释 定义一个包含了组件所有透传 attributes 的对象。 详细信息透传 Attributes 是指由父组件传入且没有被子组件声明为 props 或是组件自定义事件的 attributes 和事件处理函数。 默认情况下若是单一根节点组件$attrs 中的所有属性都是直接自动继承自组件的根元素。而多根节点组件则不会如此同时你也可以通过配置 inheritAttrs 选项来显式地关闭该行为。 3. 使用示例
父组件中调用子组件传入属性templateson-componentmessageHello, world!custom-attributehello/son-component
/template子组件中通过 v-bind$attrs 将从父组件传递过来的属性传递给孙子组件// vue3代码示例
templategrandson-component v-bind:messageprops.message v-bind$attrs{{ message }}/div
/templatescript
export default {name: Son,components: {grandsonComponent,},props: {message: String, // 在子组件的props中只声明接收message不处理customAttribute},setup(props, context) {console.log(context.attrs.customAttribute); // 输出hello子组件中未显示接收但可以在attrs属性中获取到},
};
/script孙子组件中通过context.attrs.customAttribute获取到从父组件透传过来的属性// vue3代码示例
templatediv{{ message }}/div
/templatescript
export default {name: Son,props: {message: String, // 在子组件的props中只声明接收message不处理customAttribute},setup(props, context) {console.log(context.attrs.customAttribute); // 输出hello子组件中未显示接收但可以在attrs属性中获取到},
};
/script当我们涉及到多层传参的时候父组件传出去的值中间的组件不用通过props接收但是要在子组件中间组件身上通过v-bind$attrs,这样最下层的组件才能拿到最外层组件传过来的值。
