大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
原文网址:Vue–$attrs, $listeners–使用/教程/实例_IT利刃出鞘的博客-CSDN博客
简介
说明
本文用示例介绍Vue的$attrs和$listeners的用法。
使用场景
$attrs:用于父组件隔代向孙组件传值。
$listeners:用于孙组件隔代向父组件传值。
当然,这两个也可以同时使用,达到父组件和孙组件双向传值的目的。
官网
$attrs 和 $listeners介绍
Vue2.4 中,引入了attrs 和 listeners , 新增了 inheritAttrs 选项。
$attrs:包含了父作用域中没有被 prop 接收的所有属性(不包含class 和 style 属性)。可以通过 v-bind=”$attrs” 直接将这些属性传入内部组件。
$listeners:包含所有父组件中的 v-on 事件监听器 (不包含 .native 修饰器的) ,可以通过 v-on=”$listeners” 传入内部组件。
inheritAttrs为true:继承除props之外的所有属性;inheritAttrs为false:只继承class属性
$attrs
简介
现有3个嵌套组件,A->B,B->C。
A组件传值给C组件,有多少种解决方案?
- Vuex我们使用vuex来进行数据管理,依赖于vuex我们可以一次改变,任何一个组件中都能获取。但是如果多个组件共享状态比较少,使用vuex过于麻烦和难以维护。element-ui中大量采用此方法。
- 自定义vue bus事件总线,原理类似vuex,使用特别简单。bus适合碰到组件跨级兄弟组件等无明显依赖关系的消息传递,原生app开发中经常用到,但是缺点是bus破坏了代码的链式调用,大量的滥用将导致逻辑的分散,出现问题后很难定位,降低了代码可读性。
- 使用B来做中转,A传递给B,B再给C**,**这是最容易想到的方案,但是如果嵌套的组件过多,需要传递的事件和属性较多,会导致代码繁琐,代码维护困难。
示例:父组件隔代传值给孙组件
代码
Parent.vue(父组件(顶层组件))
<template>
<div class="outer">
<h3>父组件</h3>
名字:<input v-model="name">
年龄:<input v-model.number="age" type="number">
电话:<input v-model="phoneNumber">
<child :name="name" :age="age" :phoneNumber="phoneNumber"></child>
</div>
</template>
<script>
import Child from "./Child";
export default {
name: 'Parent',
components: {Child},
data() {
return {
name: 'Tony',
age: 20,
phoneNumber: '1234567890'
}
}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid red;
padding: 20px;
}
</style>
Child.vue(子组件(中间组件))
子组件作为父组件和孙组件的传递中介,在儿子组件中给孙子组件添加v-bind=”$attrs”,这样孙子组件才能接收到数据。
<template>
<div class="outer">
<h3>子组件</h3>
<div>获得顶层组件的name:{
{name}}</div>
<grand-child v-bind="$attrs"></grand-child>
</div>
</template>
<script>
import GrandChild from "./GrandChild";
export default {
components: {GrandChild},
props: ['name'],
created() {
console.log('Child=> $attrs: ' + JSON.stringify(this.$attrs));
}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
GrandChild.vue(孙组件(最底层组件))
孙组件使用props接收从父组件传递过来的数据。(也可以在created时接收数据)
<template>
<div class="outer">
<h3>孙组件</h3>
<div>顶层组件的name:{
{name}}</div>
<div>顶层组件的age:{
{age}}</div>
<div>顶层组件的phoneNumber:{
{phoneNumber}}</div>
</div>
</template>
<script>
export default {
name: "GrandChild",
props: {
name: {
type: String
},
age: {
type: Number
},
phoneNumber: {
type: String
}
},
created() {
// this.parentAge = this.age; //也可以这样取值
console.log('GrandChild=> $attrs: ' + JSON.stringify(this.$attrs));
}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid green;
padding: 20px;
}
</style>
路由(store/index.js)
import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/parent',
name: 'Parent',
component: Parent,
}
],
})
测试
测试1:访问
访问:http://localhost:8080/#/parent
可以看到:
子组件的$attrs中包含了所有除了本组件props之外的父组件属性。
孙组件无法获取到未被子组件props接收的属性:name
孙组件可以获取到未被子组件props接收的属性:age,phoneNumber
测试2:父组件动态传值给子孙组件
$listeners
示例:孙组件隔代传值给父组件
代码
Parent.vue(父组件(顶层组件))
<template>
<div class="outer">
<h3>父组件</h3>
<div>myData:{
{ myData }}</div>
<child @changeData="changeMyData"></child>
</div>
</template>
<script>
import Child from "./Child";
export default {
name: 'Parent',
components: {Child},
data() {
return {
myData: 100
};
},
methods: {
changeMyData(val) {
this.myData = val;
}
}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid red;
padding: 20px;
}
</style>
Child.vue(子组件(中间组件))
子组件作为父组件和孙组件的传递中介,在儿子组件中给孙子组件添加v-on=”$listeners”,这样父组件才能接收到孙组件的数据。
<template>
<div class="outer">
<h3>子组件</h3>
<grand-child v-on="$listeners"></grand-child>
</div>
</template>
<script>
import GrandChild from "./GrandChild";
export default {
components: {GrandChild}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
GrandChild.vue(孙组件(最底层组件))
<template>
<div class="outer">
<h3>孙组件</h3>
<input v-model="data1" @input="edit"/>
</div>
</template>
<script>
export default {
name: "GrandChild",
data() {
return {
data1: 200,
}
},
methods: {
edit() {
// 发送事件
this.$emit("changeData", this.data1);
}
}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid green;
padding: 20px;
}
</style>
路由(store/index.js)
import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/parent',
name: 'Parent',
component: Parent,
}
],
})
测试
测试1:访问
访问:http://localhost:8080/#/parent
一开始,父组件和孙组件的数据不一致,都是初始数据。
测试2:孙组件动态传值给父组件
实际应用
应用1:封装组件
element-ui开发的后台项目中,大量使用到了el-table和el-pagination做分页数据展示,所以我封装一个自定义组件page-table:
<template>
<div class="page-table">
<div class="wrapper">
<el-table
ref="elTable"
:data="tableData">
<slot/>
</el-table>
<div style="margin-top: 16px;overflow: hidden">
<el-pagination
class="page"
:current-page="currentPage"
layout="total, prev, pager, next, jumper"
:total="total"
@current-change="handleCurrentChange"/>
</div>
</div>
</div>
</template>
这样做的副作用是:引用page-table的地方无法使用el-table和属性和事件。
解决方案:在el-table使用的地方加上v-on=”$listeners”和v-bind=”$attrs”,这样使用page-table的地方可使用所有el-table的属性和事件。
<template>
<div class="page-table">
<div class="wrapper">
<el-table
ref="elTable"
v-bind="$attrs"
v-on="$listeners"
:data="tableData">
<slot/>
</el-table>
<div style="margin-top: 16px;overflow: hidden">
<el-pagination
class="page"
:current-page="currentPage"
layout="total, prev, pager, next, jumper"
:total="total"
@current-change="handleCurrentChange"/>
</div>
</div>
</div>
</template>
应用2:兄弟组件传值到最外层
有时候会碰到多个兄弟组件传递参数到最外层,如有B组件包含C1和C2,都需要和A交互,定义2个props使用v-bind即可。
<template>
<div class="page-table">
<div class="wrapper">
<el-table
ref="elTable"
v-bind="table1Props"
:data="tableData">
<slot/>
</el-table>
<el-table
ref="elTable"
v-bind="table2Props"
:data="tableData">
<slot/>
</el-table>
<div style="margin-top: 16px;overflow: hidden">
<el-pagination
class="page"
:current-page="currentPage"
layout="total, prev, pager, next, jumper"
:total="total"
@current-change="handleCurrentChange"/>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
table1Props: Object,
table2Props: Object,
}
</script>
其他网址
Vue使用$attrs与$listeners实现多层嵌套传递 – 掘金
vue $attrs的使用_随意花的博客-CSDN博客_$attrs
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184411.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...