认识一下vue中的$attrs和$listeners属性,聊聊用法
本篇文章带大家了解一下vue中封装组件利器:$attrs、$listeners属性,看看它们的用法,希望对大家有所帮助!
多级组件嵌套需要传递数据时,通常使用的方法是通过vuex
。但仅仅是传递数据,不做中间处理,使用 vuex
处理,未免有些大材小用了。所以就有了 $attrs
、 $listeners
两个属性 ,通常配合 inheritAttrs 一起使用。【相关推荐:vuejs视频教程】
$attrs
- 从父组件传给自定义子组件的属性,如果没有
prop
接收会自动设置到子组件内部的最外层标签上,如果是class
和style
的话,会合并最外层标签的class
和style
。 - 如果子组件中不想继承父组件传入的非
prop
属性,可以使用inheritAttrs
禁用继承,然后通过v-bind="$attrs"
把外部传入的 非prop
属性设置给希望的标签上,但是这不会改变class
和style
。
inheritAttrs 属性
2.4.0 新增
官网链接 https://cn.vuejs.org/v2/api/#inheritAttrs
类型:
boolean
默认值:
true
-
详细:
默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置
inheritAttrs
到false
,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property$attrs
可以让这些 attribute 生效,且可以通过v-bind
显性的绑定到非根元素上。注意:这个选项不影响
class
和style
绑定。
例子:
父组件
<template> <my-input required placeholder="请输入内容" type="text" class="theme-dark" /> </template> <script> import MyInput from './child' export default { name: 'parent', components: { MyInput } } </script>
子组件
<template> <div> <input v-bind="$attrs" class="form-control" /> </div> </template> <script> export default { name: 'MyInput', inheritAttrs: false } </script>
子组件中没有接受父组件中传过来的值,也没有绑定,但是有v-bind="$attrs"
这个属性,他会自动接受并绑定
inheritAttrs: false
inheritAttrs: true
$listeners (官网解释)
- listeners: 包含了父作用域中的 (不含
.native
修饰器的)v-on
事件监听器。它可以通过v-on="$listeners"
传入内部组件——在创建更高层次的组件时非常有用。
先上代码:这里只举例focue
、input
两个原生事件
// 父组件 <template> <my-input required placeholder class="theme-dark" @focue="onFocus" @input="onInput" > </my-input> </template> <script> import MyInput from './child' export default { components: { MyInput }, methods: { onFocus (e) { console.log(e.target.value) }, onInput (e) { console.log(e.target.value) } } } </script>
// 子组件 <template> <div> <input type="text" v-bind="$attrs" class="form-control" @focus="$emit('focus', $event)" @input="$emit('input', $event)" /> </div> </template> <script> export default { name: 'MyInput', inheritAttrs: false } </script>
这样绑定原生事件很麻烦,每一个原生事件都需要绑定,但用v-on="$listeners"
就会省事很多
<input type="text" v-bind="$attrs" class="form-control" + v-on="$listeners" - @focus="$emit('focus', $event)" - @input="$emit('input', $event)" />
这样一行代码就能解决绑定所有的原生事件的问题
以上是认识一下vue中的$attrs和$listeners属性,聊聊用法的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

在 Vue.js 中使用 Bootstrap 分为五个步骤:安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选:自定义样式。可选:使用插件。

可以通过以下步骤为 Vue 按钮添加函数:将 HTML 模板中的按钮绑定到一个方法。在 Vue 实例中定义该方法并编写函数逻辑。

Vue.js 中的 watch 选项允许开发者监听特定数据的变化。当数据发生变化时,watch 会触发一个回调函数,用于执行更新视图或其他任务。其配置选项包括 immediate,用于指定是否立即执行回调,以及 deep,用于指定是否递归监听对象或数组的更改。

Vue 多页面开发是一种使用 Vue.js 框架构建应用程序的方法,其中应用程序被划分为独立的页面:代码维护性:将应用程序拆分为多个页面可以使代码更易于管理和维护。模块化:每个页面都可以作为独立的模块,便于重用和替换。路由简单:页面之间的导航可以通过简单的路由配置来管理。SEO 优化:每个页面都有自己的 URL,这有助于搜索引擎优化。

在 Vue.js 中引用 JS 文件的方法有三种:直接使用 <script> 标签指定路径;利用 mounted() 生命周期钩子动态导入;通过 Vuex 状态管理库进行导入。

Vue.js 返回上一页有四种方法:$router.go(-1)$router.back()使用 <router-link to="/"> 组件window.history.back(),方法选择取决于场景。

Vue.js 遍历数组和对象有三种常见方法:v-for 指令用于遍历每个元素并渲染模板;v-bind 指令可与 v-for 一起使用,为每个元素动态设置属性值;.map 方法可将数组元素转换为新数组。

Vue 中 div 元素跳转的方法有两种:使用 Vue Router,添加 router-link 组件。添加 @click 事件监听器,调用 this.$router.push() 方法跳转。
