介绍
这篇文章给大家介绍如何在Vue中使用vm。$ attrs内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
<强> 1,vm。$ attrs简介
包含了父作用域中不作为道具被识别(且获取)的特性绑定(类和风格除外)。当一个组件没有声明任何道具时,这里会包含所有父作用域的绑定(类和风格除外),并且可以通过v-bind=癮ttrs"美元;传入内部组件,在创建更高层次的组件时非常有用。
猛一看有点看不明白....
<强> 2场景介绍
vue中一个比较令人烦恼的事情是属性只能从父组件传递给子组件。这也就意味着当你想向嵌套层级比较深组件数据传递,只能由父组件传递给子组件,子组件再传递给孙子组件……像下面这样:
& lt; parent-component : passdown=皃assdown"比;
& lt; child-component : passdown=皃assdown"比;
& lt; grand-child-component : passdown=皃assdown"比;
.... 就这样一层一层的往下传递passdown这个变量,最后才能用{{passdown}}。
假如我们需要传递的属性只有1、2个还行,但是如果我们要传递的有几个或者10来个的情况,这会是什么样的场景,我们会在每个组件不停的道具,每个必须写很多遍。有没有其它方便的写法吗?有,通过vuex的父子组件通信,的确这个是一个方法,但是还有其它的方法,这个就是我们要说的。通过inheritAttrs选项,以及实例属性$ attrs
<强> 3,实例:
& lt; template>
,& lt; div 类=癶ome"比;
& lt;才能mytest : title=皌itle",: massgae=癿assgae"祝辞& lt;/mytest>
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,名字:& # 39;回家# 39;
,data (), {
return {才能
,,标题:& # 39;title1111& # 39;
,,massgae: & # 39; message111& # 39;
,,}
},
,组件:{
& # 39;才能mytest # 39;: {
,,模板:“& lt; div>这是个h2标题{{标题}}& lt;/div>”,
,,道具:[& # 39;标题# 39;],
,,数据(){
,,,返回{
,,,,杂志:& # 39;111 & # 39;
,,,}
,,},
,才能创建:函数(){
,,,console.log(这一点。$ attrs)//注意这里
,,}
,,}
,}
}
& lt;/script> 上边的代码,我们在组件里只是用了标题这个属性,massgae属性我么是没有用的,那么下浏览器渲染出来是什么样呢?如下图:
我们看到:组件内未被注册的属性将作为普通html元素属性被渲染,如果想让属性能够向下传递,即使道具组件没有被使用,你也需要在组件上注册。这样做会使组件预期功能变得模糊不清,同时也难以维护组件的干燥。在Vue2.4.0,可以在组件定义中添加inheritAttrs:假的,组件将不会把未被注册的道具呈现为普通的html属性。但是在组件里我们可以通过其$ attrs可以获取到没有使用的注册属性,如果需要,我们在这也可以往下继续传递。
如果我们在子组件里设置inheritAttrs:错误:
组件:{
& # 39;才能mytest # 39;: {
,,模板:“& lt; div>这是个h2标题{{标题}}& lt;/div>”,
,,道具:[& # 39;标题# 39;],
,,,inheritAttrs:假的,
,,数据(){
,,,返回{
,,,,杂志:& # 39;111 & # 39;
,,,}
,,},
,才能创建:函数(){
,,,console.log(这一点。$ attrs)//注意这里
,,}
以前,,} 渲染效果如下:
不继承的情况。png
<>强补充:说一下$ attrs的使用
有一个页面由父组件,子组件,孙子组件构成,如下:
& lt; template>
& lt;才能div 比;
,,,& lt; childcom : name=皀ame",:年龄=癮ge",:性=皊ex"祝辞& lt;/childcom>
& lt;才能/div>
& lt;/template>
& lt; script>
export default {
& # 39;才能名字# 39;:& # 39;测试# 39;
道具:[],才能
数据才能(){
,,,return {
,,,,,& # 39;名字# 39;:& # 39;张三& # 39;,
,,,,,& # 39;年龄# 39;:& # 39;30 & # 39;
,,,,,& # 39;性与# 39;:& # 39;男& # 39;
,,,}
,,},
组件:{才能
,,,& # 39;childcom& # 39;: {
,,,,,模板:“& lt; div>
,,,,,,,& lt; div>{{名称}}& lt;/div>
,,,,,,,& lt; grandcom v-bind=癮ttrs"美元;祝辞& lt;/grandcom>
,,,,,& lt;/div>”
,,,,,道具:[& # 39;名字# 39;],
,,,,,组件:,{
,,,,,,,& # 39;grandcom& # 39;: {
,,,,,,,,,模板:“& lt; div> {{$ attrs}} & lt;/div>”,
,,,,,,,}
,,,,,}
,,,}
,,}
}
& lt;/script>
