大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
$attrs
的使用 vue
$attrs
是在vue的2.40版本以上添加的。- 项目中有多层组件传参可以使用
$attrs
,可以使代码更加美观,更加简洁,维护代码的时候更方便。如果使用普通的父子组件传参prop
和$emit
,$on
会很繁琐;如果使用vuex
会大材小用,只是在这几个组件中使用,没必要使用vuex
;使用事件总线eventBus
,使用不恰当的话,有可能会出现事件多次执行。 - 如果给组件传递的数据,组件不使用props接收,那么这些数据将作为组件的HTML元素的特性,这些特性绑定在组件的HTML根元素上
inheritAttrs: false
的含义是不希望本组件的根元素继承父组件的attribute,同时父组件传过来的属性(没有被子组件的props接收的属性),也不会显示在子组件的dom元素上,但是在组件里可以通过其$attrs可以获取到没有使用的注册属性, “inheritAttrs: false`是不会影响 style 和 class 的绑定- 以下是
$attrs
的使用示例(父组件的列表行数据传递给孙子组件展示)
- 父组件(Father.vue),给子组件关联数据,子组件如果不用props接收,那么这些数据就作为普通的HTML特性应用在子组件的根元素上
<template>
<div>
<el-table :data='list'>
<el-table-column
prop="name"
label="姓名"
></el-table-column>
<el-table-column
prop="study"
label="学习科目"
></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click='transmitClick(scope.row)'>传递</el-button>
</template>
</el-table-column>
</el-table>
<!-- 儿子组件 -->
<ChildView
:is-show="isOpen"
:row="row"
>
</ChildView>
</div>
</template>
<script>
import ChildView from './Child.vue'
export default {
components: {
ChildView },
data() {
return {
isOpen: false,
row: {
},
list: [
{
name: '王丽', study: 'Java' },
{
name: '李克', study: 'Python' }
]
}
},
methods: {
// 传递事件
transmitClick(row) {
this.isOpen = true;
this.row = row
}
}
}
</script>
- 儿子组件(Child.vue),中间层,作为父组件和孙子组件的传递中介,在儿子组件中给孙子组件添加
v-bind="$attrs"
,这样孙子组件才能接收到数据
<template>
<div class='child-view'>
<p>儿子组件</p>
<GrandChild v-bind="$attrs"></GrandChild>
</div>
</template>
<script>
import GrandChild from './GrandChild.vue'
export default {
// 继承所有父组件的内容
inheritAttrs: true,
components: {
GrandChild },
data() {
return {
}
}
}
</script>
<style lang="stylus">
.child-view {
margin: 20px
border: 2px solid red
padding: 20px
}
</style>
- 孙子组件(GrandChild.vue),在孙子组件中一定要使用props接收从父组件传递过来的数据
<template>
<div class='grand-child-view'>
<p>孙子组件</p>
<p>传给孙子组件的数据:{
{
row.name}} {
{
row.name !== undefined? '学习' : ''}} {
{
row.study}}</p>
</div>
</template>
<script>
export default {
// 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性
inheritAttrs: false,
// 在本组件中需要接收从父组件传递过来的数据,注意props里的参数名称不能改变,必须和父组件传递过来的是一样的
props: {
isShow: {
type: Boolean,
dedault: false
},
row: {
type: Object,
dedault: () => {
}
}
}
}
</script>
<style lang="stylus">
.grand-child-view {
border: 2px solid green
padding: 20px
margin: 20px
}
</style>
结果:
在上面提过,如果给子组件传递的数据,子组件不使用props接收,那么这些数据将作为子组件的特性,这些特性绑定在组件的HTML根元素上,在vue2.40版本之后,可以通过inheritAttrs = false
来控制这些特性是否显示在dom元素上 如:案例中父组件给子组件传递的row和isShow,子组件没有使用props接收,这个2个数据直接作为HTML的特殊属性。子组件使用inheritAttrs = true
,那么特性显示在dom上,如果设置为false,那么特性不显示在dom上
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/180620.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...