vue中怎么向html传值,Vue中的$attrs 爷孙传值

所谓的$arrts其实就是多级组件中的props，它就像一个中间件，用来传递爷组件给孙组件的数据，使用的时候只需给父组件中的孙组件配置v-bind="$attrs",然后再爷组件中传入孙组件所需要的数据，孙组件正常接收即可。

参考于

什么情况下使用

在实际开发过程中，会经常出现组件多级嵌套的情况，那么这个时候如上图所示，需要组件A传递数据给组件C，通常可以使用props依次传递 和 Vuex(状态管理)来实现，但是这两种方式要么代码臃肿不堪，要么大材小用，而这个时候$attrs就可以很好的解决这个问题。

$attrs是Vue实例的属性。

具体见下文demo

componentA

我是组件A

import componentB from '@/componentB'

export default {

components: {

componentB

}

}

.dv{

width: 600px;

height: 600px;

background-color: yellow;

}

componentB

我是B

传递给我的是{{text}}

import componentC from '@/componentC'

export default {

components: {

componentC

},

props: {

text: {

type: String,

default: ''

}

}

}

.dv{

width: 400px;

height: 400px;

background-color: pink;

}

componentC

我是c

我要爷爷的{{msg}}

export default {

props: {

msg: {

type: String,

default: ''

}

}

}

.dv{

width: 200px;

height: 200px;

background-color: red;

}

效果

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[Vue中的$attrs 爷孙传值]http://www.zyiz.net/tech/detail-97911.html