vue3透传Attributes,组件名称上写的事件、style、类名也会生效;
- 如果是透传事件,点击子组件内部按钮,会执行组件内部,再执行组件名上的
父组件
<script setup>
import ChildView from './ChildView.vue'function onClick(){alert('父组件透传')
}
</script><template><ChildView@click="onClick"></ChildView>
</template>
子组件
<script setup>
function childClick(){alert('子组件自己点击')
}
</script><template><button @click="childClick">透传测试</button>
</template>
先执行childClick,再执行onClick
- 多层嵌套也会实现透传
父组件
<script setup>
import ChildView from './ChildView.vue'function onClick(){alert('父组件透传')
}
</script><template><ChildView@click="onClick"></ChildView>
</template>
子组件
<script setup>import GrandsonView from './GrandsonView.vue';
function childClick(){alert('子组件透传')
}
</script><template>
<GrandsonView></GrandsonView>
</template>
孙组件
<script setup>
function grandsonClick() {alert('孙子组件点击')
}
</script><template>
<button @click="grandsonClick">透传测试</button>
</template>
点击孙子内部的按钮后,父组件里组件名称上的点击事件onClick也生效了。
- 透传的一些规则
父组件
<script setup>
import ChildView from './ChildView.vue'function fatherClick(){alert('父组件透传')
}
function fatherFunction(){alert('父组件方法1')
}
</script><template><ChildViewprop1=1prop2=2@click="fatherClick"@hover="fatherFunction"></ChildView>
</template>
子组件
<script setup>import GrandsonView from './GrandsonView.vue';
defineProps(['prop1'])
const emit = defineEmits(['fatherClick'])
function childClick() {emit('fatherClick')
}
</script><template>
<GrandsonView @click="childClick"></GrandsonView>
</template>
孙组件
<script setup></script><template><!-- 获取所有的透传值 -->
<div>{{$attrs}}</div>
<!-- 调用父组件透传下来的点击事件 -->
<div>{{$attrs.onClick}}</div>
<!-- 调用父组件透传下来的悬浮事件 -->
<div>{{$attrs.onHover}}</div>
<!-- 调用父组件的prop -->
<div>{{$attrs.prop2}}</div>
</template>
1. 如果prop被中间组件用了,使用过的不会再向里传
父组件有prop1,prop2,但子组件defineProps([‘prop1’])把prop1使用了,所以孙子组件只剩prop2;
2. 如果事件被中间组件使用了,使用过的也不会再向里传
父组件透传了fatherClick、fatherFunction,但子组件emit(‘fatherClick’)使用了fatherClick,所以孙子组件只剩fatherFunction
attrs 对象总是反映为最新的透传 attribute,但它并不是响应式。不能通过侦听器去监变化。需要响应性,可以使用 prop。或者你可使用 onUpdated() ,在每次更新时使用最新的 attrs